我在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>
答案 0 :(得分:0)
如果你没有传递任何内容,请从ajax删除数据:“”属性。
答案 1 :(得分:0)
在索引中删除
@ Html.Partial( “_ UserTestPartial”)
这会抛出错误,因为您没有以这种方式将任何模型传递给局部视图。
当您通过ajax调用将部分视图绑定到#partialDiv时,它将正常工作