I have a dilemma. Please send help!
我陷入两难境地。请发送帮助！
I'm building an MVC 4 web application and cannot get a partial view to load onto a section of the page when a form from another partial view is loaded. Here is what I have done so far:
我正在构建一个MVC 4 Web应用程序，当加载另一个局部视图的表单时，无法获得部分视图加载到页面的一部分。这是我到目前为止所做的：
On the base page (ReviewPage), I have a section that loads a partial view when the page is loaded. Something like this:
在基页（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>
Here is the partial view (_NoNotes) that is loaded initially by the _CompanyNotes action in the controller:
以下是控制器中_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)
When the Add Note button is clicked in this _NoNotes partial view, the _CompanyNotesEditGet action in the controller returns the partial view (_NotesForm) which replaces _NoNotes on the page in the #company_notes div. THIS works correctly. Here is the _NotesForm partial view:
在此_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>
WHAT I WOULD LIKE TO HAPPEN NEXT: When text is entered to the Notes field and the submit is pressed, I would like the data to be passed to the controller so that it can be saved to the database and have a new partial view replace the _NotesForm partial on the page.
我想要发生的事情下一步：当文本输入到Notes字段并按下提交时，我希望将数据传递给控制器，以便将其保存到数据库并使用新的部分视图替换_NotesForm局部在页面上。
WHAT CURRENTLY HAPPENS: When text is entered to the Notes field and submit is pressed the controller receives the data and does it's work. However, instead of the partial view replacing the form that was just submitted, it replaces the whole page. Literally the whole page is replaced with the contents of this partial view.
当前发生的事情：当文本输入到Notes字段并按下提交时，控制器会接收数据并完成工作。但是，它不是替换刚刚提交的表单的部分视图，而是替换整个页面。从字面上看，整个页面将替换为此局部视图的内容。
I tried using various form submitting techniques that I found on here and elsewhere but nothing seems to be working the way I want it to.
我尝试使用我在这里和其他地方发现的各种表单提交技术，但似乎没有什么工作方式我希望它。
Here is the controller action that should return the partial view _CompanyNotes:
这是应该返回部分视图的控制器动作_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);
}
Here is the JavaScript I've written to catch the submit event, run the appropriate controller action, and then place the partial view back on the ReviewPage:
这是我编写的用于捕获提交事件的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;
};
});
My theory is that I'm not catching the submit event with my js code somehow and instead, the submit action is going directly into my controller which is causing the issue. However, I've made sure that my js script is added to the script bundle that is added to the bottom of every view via the _Layout view. So I'm honestly flabbergasted here. Thoughts anyone?
我的理论是，我没有以某种方式使用我的js代码捕获提交事件，而是提交操作直接进入我的控制器，这导致了问题。但是，我确保将我的js脚本添加到通过_Layout视图添加到每个视图底部的脚本包中。所以我真的在这里大吃一惊。想什么？
1 个解决方案
#1
0
I tried the event propagation method but was still getting the same result. Instead of the js catching the event, the submit is going directly to the controller and refreshing the entire page with the partial view.
我尝试了事件传播方法，但仍然得到了相同的结果。而不是js捕获事件，提交将直接进入控制器并使用部分视图刷新整个页面。
I added id="edit-company-notes" to the form tag on the partial view _NotesForm.
我在部分视图_NotesForm上的表单标记中添加了id =“edit-company-notes”。
And wrote the following js I wrote for the event propagation:
并编写了我为事件传播编写的以下js：
$('div#company_notes').on('.submit', '#edit-company-notes', 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;
});
Totally goofed though with using '.submit' instead of 'submit'! That one period was causing the whole thing to be skipped!
虽然使用'.submit'而不是'submit'完全搞笑了！那个时期导致整个事情被忽略了！
Here is the correct js for the event handler:
以下是事件处理程序的正确js：
$('div#company_notes').on('submit', '#edit-company-notes', 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;
});
I hope this helps someone else banging their head against the wall like I was doing last night!
我希望这可以帮助别人像昨晚一样把头撞在墙上！
#1
0
I tried the event propagation method but was still getting the same result. Instead of the js catching the event, the submit is going directly to the controller and refreshing the entire page with the partial view.
我尝试了事件传播方法，但仍然得到了相同的结果。而不是js捕获事件，提交将直接进入控制器并使用部分视图刷新整个页面。
I added id="edit-company-notes" to the form tag on the partial view _NotesForm.
我在部分视图_NotesForm上的表单标记中添加了id =“edit-company-notes”。
And wrote the following js I wrote for the event propagation:
并编写了我为事件传播编写的以下js：
$('div#company_notes').on('.submit', '#edit-company-notes', 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;
});
Totally goofed though with using '.submit' instead of 'submit'! That one period was causing the whole thing to be skipped!
虽然使用'.submit'而不是'submit'完全搞笑了！那个时期导致整个事情被忽略了！
Here is the correct js for the event handler:
以下是事件处理程序的正确js：
$('div#company_notes').on('submit', '#edit-company-notes', 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;
});
I hope this helps someone else banging their head against the wall like I was doing last night!
我希望这可以帮助别人像昨晚一样把头撞在墙上！