Jquery AJAX表单重定向而不是更新目标
我知道这个问题已经被问了很多次,我已经尝试了我能找到的每一个解决方案,但我仍然无法让我的Ajax表单更新DIV,而不是重定向到操作方法,例如(Local..Home/Index\u AddUser)。我缩短了代码,因为它很长,否则: 查看Jquery AJAX表单重定向而不是更新目标,jquery,ajax,partial-views,unobtrusive-ajax,Jquery,Ajax,Partial Views,Unobtrusive Ajax,我知道这个问题已经被问了很多次,我已经尝试了我能找到的每一个解决方案,但我仍然无法让我的Ajax表单更新DIV,而不是重定向到操作方法,例如(Local..Home/Index\u AddUser)。我缩短了代码,因为它很长,否则: 查看 @using (Ajax.BeginForm("Index_AddUser", new AjaxOptions{UpdateTargetId = "userList"})) { @Html.AntiForgeryToken()
@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>
\u布局
@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>
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新手,如果您需要更多信息,请询问:)为什么不尝试使用jquery的Javascript来更新div async?而不是使用mvc控件 在我看来,我将使用视图显示用户,并使用局部视图添加新用户 这意味着您的视图
用户
<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>
您的部分添加用户视图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>
}
如果你能提供一个样品,那将是非常感激的,这不是一个答案。我知道你不能评论,因为声誉,但你可以添加代码,如果你知道如何做,以帮助从你的代码你想添加一个用户和显示所有的用户。我说的对吗?是的,因此我从部分视图中获得用户(一个表)的显示,该视图工作正常,当他们在视图中单击“提交”时,我希望在不重新加载整个页面的情况下将此新用户添加到表中谢谢你和engoy MVC:)通常,如果你没有使用
@Ajax.BeginForm
的正确重载,它会重定向,或者您尚未添加所有脚本。尝试使用一个带有控制器名称的表单,如果您已经添加了所有必需的脚本及其加载,还可以检查开发工具的网络选项卡,将httpmethod和insertionmode添加到ajaxoptions@ChaitanyaGadkari我这样做了:@使用(Ajax.BeginForm(“Index_AddUser”),新的AjaxOptions{HttpMethod=“POST”,UpdateTargetId=“userList”,InsertionMode=InsertionMode.Replace}))
@chaitangayagadkari它仍在重定向到新页面检查其他内容?比如说,如果所有脚本都在加载,并尝试使用带有控制器名称的beginform?也看看是否有帮助
function newUser() {
$.ajax({
url: '/Home/CreateUser',
success: function (data) {
$('#NewUserDiv').html(data);
}
});
}
@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>
}
[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");
}