从提交父视图局部视图数据 [英] Submitting partial view data from parent view
问题描述
如何从父视图提交局部视图的数据。
How to submit partial view data from parent view .
我是新手，MVC，
我创建了一个局部视图的 _CurrentData 其中包含编辑器控件 - 文本框等
并补充在主视图提交按钮：
I am newbie to MVC,
I have created a partial view _CurrentData which contains editor controls - textbox etc
and added Submit button in the main view:
<div class="row">
<div class="col-md-12">
@Html.Partial("_CurrentData", Model.CurrentItemDetails)
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div>
<input type="button" class="btn btn-primary" value="Submit" id="btnSubmit"/>
<input type="button" class="btn btn-primary" value="Cancel" id="btnCancel" />
<br/><br />
</div>
</div>
</div>
视图模型
public class ProductionViewModel
{
public ItemDetails CurrentItemDetails { get; set; }
}
public class ItemDetails
{
public int ID { get; set; }
public string Name { get; set; }
}
查看
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Editor</h3>
</div>
<div class="panel-body">
<div class="row form-group">
<div class="col-sm-4 control-label text-right">
<strong>Name:</strong>
</div>
<div class="col-sm-8 control-label">
@Html.TextBoxFor(m => m.Name , new { @class = "form-control" })
</div>
</div>
</div>
</div>
现在的btnSubmit按钮我想从 _CurrentData 查看提交数据到服务器，然后刷新局部视图，单击
如何做到这一点？
now on clicking of 'btnSubmit' I want to submit data from _CurrentData view to the server and then refresh the partial view,
How to accomplish this?
推荐答案
你要求的功能是AJAX。 AJAX请求是异步，这在最基本的层面上意味着HTTP请求可以启动，并回答了，而不需要刷新页面。
What you're asking for
The functionality you're asking for is AJAX. AJAX requests are 'Asynchronous', which at the most basic level means HTTP requests can be initiated and responded to without the need to refresh the page.
正如有人在你的问题评论中写道，jQuery的可以使用，而且提供了一个很好的方式做AJAX请求，但很多人可能会流泪，如果你提供只是一个AJAX请求整个jQuery库。
As someone wrote in comment to your question, jQuery can be used and does provide a nice way to do AJAX requests, but a lot of people would probably cry if you included the entire jQuery library just for an AJAX request.
因此，在JavaScript中，这是一个的 liiiiiittle 的比较复杂一点，有一些例子的此处。我不会告诉你如何做到这一点在JavaScript中，只是因为我没有很多时间，现在，但得到的答复后，我可能会更新。我可能会建议寻找到，如果你可以做这种方式。
So in JavaScript this is a liiiiiittle bit more complicated, there are some examples here. I'm not going to show you how to do it in JavaScript simply because I don't have a lot of time right now, but I might update the answer later. I would probably advise looking into doing it this way if you can.
在jQuery的这很容易。对于AJAX请求的文档这里。
In jQuery this is easy. The documentation for AJAX requests is here.
基本上你需要做的是向服务器请求，因此它可以更新您的局部视图的数据的，然后返回新的局部视图供您使用替换当前的HTML。它看起来是这样的：
Basically what you need to do is make a request to the server so it can update your partial view data and then return the new partial view for you to replace your current HTML with. It would look something like:
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$.ajax({
url: '@Url.Content("~/Controller/_CurrentData")',
type: 'POST',
data: {
//partialViewForm relates to the form element in your partial view
model: JSON.stringify($('#partialViewForm').serializeObject());
},
success: function (response) {
if (response) {
//partialViewDiv relates to the div in which your partial view is rendered
$('#partialViewDiv').html(response);
}
},
error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});
以上会假设你有这样的事情作为你的控制器的方法：
The above would assume you had something like this as your controller method:
[HttpPost]
public ActionResult _CurrentData(ItemDetails model)
{
//do stuff with model here
return PartialView("_CurrentData", model);
}
所以这基本上是你如何联系控制器。为了调用AJAX在自己的网页，你需要有一个按钮，在你的局部视图的形式中，你可以使用覆盖事件。preventDefault（）。
这篇关于从提交父视图局部视图数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
