单击按钮后加载局部视图
Load partial view after button click
我有这个问题,搜索了很多但现在有了正确的答案。
我的 _Layout 页面的页脚中有一个联系表单,但是当我单击该按钮时,局部视图会在新页面中打开。
我记得包括 jquery.unobtrusive-ajax.js。这是我的。
控制器:
[HttpGet]
public ActionResult Call()
{
return PartialView("_PartialFooter");
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Call(CallMe callMe)
{
if(ModelState.IsValid)
{
}
return PartialView("_PartialFooter");
}
_Layout 脚本在底部的 Body 标签上方
@using (Ajax.BeginForm("Call", "Home", new AjaxOptions { UpdateTargetId = "result" }))
{
<div id="result" class="margin-bottom-5">
@Html.Action("Call", "Home")
</div>
<button class="btn btn-common-small margin-bottom-10 pull-right" type="submit">Send</button>
}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/myscripts")
@RenderSection("scripts", required: false)
@section Scripts {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
}
_PartialFooter(局部视图)
@model servicemadsen.Models.CallMe
@Html.AntiForgeryToken()
<div class="row">
<div id="result" class="margin-bottom-5">
<div class="col-md-6">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", @placeholder = "Navn" } })
</div>
<div class="col-md-6">
@Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control", @placeholder = "Telefon" } })
</div>
<div class="col-md-12">
@Html.TextAreaFor(model => model.CallMeMessage, new { @class = "form-control", @placeholder = "Besked", @cols = 80, @rows = 7 })
</div>
<div class="col-md-12">
@Html.ValidationMessageFor(model => model.Name, string.Empty, new { @class = "field-validation-error" })
@Html.ValidationMessageFor(model => model.Phone, string.Empty, new { @class = "field-validation-error" })
@Html.ValidationMessageFor(model => model.CallMeMessage, string.Empty, new { @class = "field-validation-error" })
</div>
</div>
</div>
希望有人能帮忙,我可能需要一些虚拟的东西
你有没有安装微软 jquery unobstrusive ajax?如果不尝试的话。我用你的代码做了一些测试并工作了。
编辑:我还更改了一些测试代码
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Call(CallMe callMe)
{
if (ModelState.IsValid)
{
ModelState.Clear();
callMe.CallMeMessage = callMe.CallMeMessage + " i was on the server";
}
return PartialView("_PartialFooter", callMe);
}
和
@using (Ajax.BeginForm("Call", "Home", new AjaxOptions { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace}))
{
<div id="result" class="margin-bottom-5">
@Html.Action("Call", "Home")
</div>
<button class="btn btn-common-small margin-bottom-10 pull-right" type="submit">Send</button>
}
所以你可以看到变化。
我有这个问题,搜索了很多但现在有了正确的答案。
我的 _Layout 页面的页脚中有一个联系表单,但是当我单击该按钮时,局部视图会在新页面中打开。
我记得包括 jquery.unobtrusive-ajax.js。这是我的。
控制器:
[HttpGet]
public ActionResult Call()
{
return PartialView("_PartialFooter");
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Call(CallMe callMe)
{
if(ModelState.IsValid)
{
}
return PartialView("_PartialFooter");
}
_Layout 脚本在底部的 Body 标签上方
@using (Ajax.BeginForm("Call", "Home", new AjaxOptions { UpdateTargetId = "result" }))
{
<div id="result" class="margin-bottom-5">
@Html.Action("Call", "Home")
</div>
<button class="btn btn-common-small margin-bottom-10 pull-right" type="submit">Send</button>
}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/myscripts")
@RenderSection("scripts", required: false)
@section Scripts {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
}
_PartialFooter(局部视图)
@model servicemadsen.Models.CallMe
@Html.AntiForgeryToken()
<div class="row">
<div id="result" class="margin-bottom-5">
<div class="col-md-6">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", @placeholder = "Navn" } })
</div>
<div class="col-md-6">
@Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control", @placeholder = "Telefon" } })
</div>
<div class="col-md-12">
@Html.TextAreaFor(model => model.CallMeMessage, new { @class = "form-control", @placeholder = "Besked", @cols = 80, @rows = 7 })
</div>
<div class="col-md-12">
@Html.ValidationMessageFor(model => model.Name, string.Empty, new { @class = "field-validation-error" })
@Html.ValidationMessageFor(model => model.Phone, string.Empty, new { @class = "field-validation-error" })
@Html.ValidationMessageFor(model => model.CallMeMessage, string.Empty, new { @class = "field-validation-error" })
</div>
</div>
</div>
希望有人能帮忙,我可能需要一些虚拟的东西
你有没有安装微软 jquery unobstrusive ajax?如果不尝试的话。我用你的代码做了一些测试并工作了。
编辑:我还更改了一些测试代码
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Call(CallMe callMe)
{
if (ModelState.IsValid)
{
ModelState.Clear();
callMe.CallMeMessage = callMe.CallMeMessage + " i was on the server";
}
return PartialView("_PartialFooter", callMe);
}
和
@using (Ajax.BeginForm("Call", "Home", new AjaxOptions { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace}))
{
<div id="result" class="margin-bottom-5">
@Html.Action("Call", "Home")
</div>
<button class="btn btn-common-small margin-bottom-10 pull-right" type="submit">Send</button>
}
所以你可以看到变化。