我知道这个问题已经被问了很多,我已经尝试了我能找到的每个解决方案,但我仍然无法获取我的Ajax表单来更新DIV而不是重定向到Action方法,例如(Local..Home / Index_AddUser)。我缩短了代码,因为它很长:
查看
@using (Ajax.BeginForm("Index_AddUser", new AjaxOptions{UpdateTargetId = "userList"}))
{
@Html.AntiForgeryToken()
//This summarises user input and displays error messages
@Html.ValidationSummary()
<div id="aParent">
<div align="justify">
<div>@Html.LabelFor(model => model.UserLogin)</div>
<div>@Html.EditorFor(model => model.UserLogin, new { id = "UserLogin" })</div>
</div>
//Same as above repeated with different values
<div>
<div><input type="submit" value="Add User" id="UserCreate" /></div>
</div>
</div>
}
<div id="userList">
@{Html.RenderAction("UserListControl");}
</div>
部分视图
@model IEnumerable<WebApplication1.Models.UserDetail>
<table>
<!-- Render the table headers. -->
<thead>
<tr>
//Table Headers matching LabelFor in VIew
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
//Table Rows from db
</tr>
}
</tbody>
</table>
UserDetailsController
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index_AddUser([Bind(Prefix = "NewUserDetails")]UserDetail model)
{
Manager manager = new Manager();
if (model != null)
{
manager.SaveUser(model.UserID, model.UserLogin, model.FirstName, model.Surname, model.Email, model.Active);
return PartialView("UserListControl");
}
return PartialView("UserListControl");
}
_layout
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
的Web.config
<appSettings>
<add key="webpages:Version" value="3.0.0.0"/>
<add key="webpages:Enabled" value="false"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
BundleConfig
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
提前致谢,我是Stack和MVC的新手,所以如果您需要更多信息,请询问:)
答案 0 :(得分:1)
为什么不尝试用jquery来更新div异步?而不是使用mvc控件?
在我看来,我会使用“查看”和“使用局部视图添加新用户”来显示用户。
这意味着您的观点Users
<input type="button" id="addUser" onclick="newUser()" value="Add User"/>
<div id="NewUserDiv"></div>
@model IEnumerable<WebApplication1.Models.UserDetail>
<table>
<!-- Render the table headers. -->
<thead>
<tr>
//Table Headers matching LabelFor in VIew
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
//Table Rows from db
</tr>
}
</tbody>
</table>
此页面的javascript
function newUser() {
$.ajax({
url: '/Home/CreateUser',
success: function (data) {
$('#NewUserDiv').html(data);
}
});
}
您的部分添加用户查看CreateUser
@using (Html.BeginForm("CreateUser", "Home", FormMethod.Post, new { encType = "multipart/form-data", name = "NewEmployeeForm", @class = "form-group" }))
{
@Html.AntiForgeryToken()
//This summarises user input and displays error messages
@Html.ValidationSummary()
<div id="aParent">
<div align="justify">
<div>@Html.LabelFor(model => model.UserLogin)</div>
<div>@Html.EditorFor(model => model.UserLogin, new { id = "UserLogin" })</div>
</div>
//Same as above repeated with different values
<div>
<div><input type="submit" value="Add User" id="UserCreate" /></div>
</div>
</div>
}
Home中的控制器方法,用于添加用户局部视图
[HttpGet]
public ActionResult CreateUser()
{
var user = new UserDetail();
return PartialView("CreateUser", user);
}
[HttpPost]
public ActionResult CreateUser(UserDetail model)
{
Manager manager = new Manager();
if (model != null)
{
manager.SaveUser(model.UserID, model.UserLogin, model.FirstName, model.Surname, model.Email, model.Active);
}
return RedirectToAction("Home", "Users");
}