我有个困境,请帮忙!
我正在构建一个MVC 4 Web应用程序,在另一个部分视图加载表单时,无法将部分视图加载到页面的某个部分。 我目前已经完成以下步骤:
在基本页面(ReviewPage)上,当页面加载时有一部分会加载一个部分视图,就像这样:
@model AppV4.Models.NewCompanyRequest
@{
ViewBag.Title = "ReviewNewRequest";
}
<h2>New Sign Up Review</h2>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8">
<div id="company_notes">
@Html.Action("_CompanyNotes")
</div>
</div>
</div>
</div>
这里是在控制器中通过_CompanyNotes动作最初加载的部分视图(_NoNotes):
@model AppV4.Models.ViewModels.NotesOnCompanyViewModel
<h4>Notes on Company</h4>
<div class="row text-center col-sm-6 col-sm-offset-6">
<div class="text-center">
<div class="primary-action-bttn-border">
<div class="primary-action-bttn-bkg">
@Ajax.ActionLink("Add Note", "_CompanyNotesEditGet", Model, new AjaxOptions { UpdateTargetId = "company_notes", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, new { @class = "btn btn-default primary-action-bttn" })
</div>
</div>
</div>
</div>
<div class="row text-center padding-25-top">
<p>There are no notes for this company. Do you want to add some?</p>
</div>
@Html.HiddenFor(item => Model.RequestId)
当在_NoNotes的局部视图中单击“添加备注”按钮时,控制器中的_CompanyNotesEditGet操作返回了局部视图(_NotesForm),它替换了位于#company_notes div中的_NoNotes。这个操作是正确的。这是_NotesForm的局部视图:
@model AppV4.Models.ViewModels.NotesOnCompanyViewModel
<form data-gp-ajax="true" action="@Url.Action("_CompanyNotesEditPost", "NewSignUpRequestReview")" method="post" data-gp-target="#company-notes">
<div class="form-horizontal">
<h4>Notes On Company</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.NotesId)
@Html.HiddenFor(model => model.CompanyId)
<div class="form-group">
@Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2 text-left" })
<div class="col-md-12">
@Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
</form>
希望发生的事情: 当在“Notes”栏中输入文本并按下提交按钮时,我希望数据被传递到控制器,以便保存到数据库,并有一个新的局部视图替换页面上的“_NotesForm”局部视图。
目前发生的事情: 当在“Notes”栏中输入文本并按下提交按钮时,控制器接收数据并进行处理。但是,替换的不是刚刚提交的表单,而是整个页面。实际上,整个页面都被替换为这个局部视图的内容。
我尝试使用我在这里和其他地方找到的各种表单提交技术,但好像没有任何一种方法能按照我想要的方式工作。
这是应该返回局部视图_CompanyNotes的控制器操作:
[HttpPost]
public ActionResult _CompanyNotesEditPost(NotesOnCompanyViewModel notesOnCompanyViewModel)
{
//code that reviews the notes and places it into the db//
return PartialView("~/Views/NotesOnCompany/_CompanyNotes.cshtml", notesOnCompanyViewModel);
}
这是我编写的 JavaScript 代码,用于捕获提交事件,执行相应的控制器操作,然后将部分视图放回 ReviewPage 页面:
$(function () {
$('form[data-gp-ajax=true]').submit(function () {
var $form = $(this);
$.ajax({
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize(),
success: function (viewHTML) {
$("#company_notes").show();
$("#company_notes").html(viewHTML);
};
})
return false;
};
});
我的理论是,我以某种方式没有使用我的js代码捕捉到提交事件,而是直接进入了我的控制器,这导致了问题。但是,我确保我的js脚本已添加到通过_Layout视图添加到每个视图底部的脚本包中。所以,我真的感到非常困惑。有什么想法吗?
$('form[data-gp-ajax=true]')
不正确(需要在true
周围加上引号),但如果你只是使用一个id
属性,那将会更容易。但由于该表单是在页面首次渲染后加载的,因此你需要使用 事件委托 - 例如$(document).on('.submit', '#yourFormId', function() {...
- user3559349$.ajax()
方法,我建议您摆脱Ajax.ActionLink()
并同样使用$.ajax()
方法。 - user3559349valid()
)。 - user3559349