Ajax调用始终在错误部分

时间:2017-07-17 06:53:44

标签: ajax asp.net-mvc

我在mvc中有我想要根据下拉列表获取用户详细信息的演示,我使用ajax for selectedindex更改了下拉事件以在部分视图中显示userdetails,但是ajax调用总是出错部分..

Controller :-

  public ActionResult Index()
    {
        var usermodel = new UserModel();
        usermodel.listuser = GetUserData();
        usermodel.UserId = usermodel.listuser.First().UserId;
        usermodel.UserName = usermodel.listuser.First().UserName;
        usermodel.UserSalary = usermodel.listuser.First().UserSalary;

        return View(usermodel);
    }

    public PartialViewResult GetUserRecord(int UserId)
    {
        var userModel = new UserModel();
        userModel.listuser = GetUserData();
        var user = userModel.listuser.Where(e => e.UserId == UserId).FirstOrDefault();

        userModel.UserId = user.UserId;
        userModel.UserName = user.UserName;
        userModel.UserSalary = user.UserSalary;

        return PartialView("_UserTestPartial.cshtml", userModel);
    }



    private List<UserModel> GetUserData()
    {
        var listuser = new List<UserModel>();
        var user1 = new UserModel();
        user1.UserId = 1;
        user1.UserName = "Abcd";
        user1.UserSalary = 25000;
        var user2 = new UserModel();
        user2.UserId = 2;
        user2.UserName = "bcde";
        user2.UserSalary = 35000;
        var user3 = new UserModel();
        user3.UserId = 1;
        user3.UserName = "cdef";
        user3.UserSalary = 45000;
        listuser.Add(user1);
        listuser.Add(user2);
        listuser.Add(user3);
        return listuser;
    }

Model:-
 public class UserModel
{
    public int UserId { get; set; }

    public string UserName { get; set; }

    public double UserSalary { get; set; }

    public List<UserModel> listuser { get; set; }

    public IEnumerable < SelectListItem > UserListItems
    {
        get
        {
            return new SelectList(listuser, "UserId", "UserName");
        }
    }


}

索引视图: -

@Html.DropDownListFor(m => m.UserId, Model.UserListItems, "---Select User---  ", new { Class = "ddlStyle", id = "ddlUser" })

<div id="partialDiv">
@Html.Partial("_UserTestPartial")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    $("#ddlUser").on("change", function () {
        $.ajax(
        {
            url: '/User/GetUserRecord?UserId=' + $(this).attr("value"),
            type: 'GET',
            data: " ",
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $("#partialDiv").html(data);
            },
            error: function () {
                alert("error");
            }
        });
    });
});
</script>

部分视图: -

@model Dropdowndemo.Models.UserModel

<fieldset>
<legend>UserModel</legend>
<div class="display-label">
    <strong> @Html.DisplayNameFor(model => model.UserId) </strong>
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.UserId)
</div>
<div class="display-label">
    <strong> @Html.DisplayNameFor(model => model.UserName) </strong>
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.UserName)
</div>
<div class="display-label">
    <strong> @Html.DisplayNameFor(model => model.UserSalary) </strong>
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.UserSalary)
</div>
</fieldset>

2 个答案:

答案 0 :(得分:0)

如果你没有传递任何内容,请从ajax删除数据:“”属性。

答案 1 :(得分:0)

在索引中删除

@ Html.Partial( “_ UserTestPartial”)

这会抛出错误,因为您没有以这种方式将任何模型传递给局部视图。

当您通过ajax调用将部分视图绑定到#partialDiv时,它将正常工作