从父视图提交局部视图数据
[英] Submitting partial view data from parent view
本文介绍了从父视图提交局部视图数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何从父视图提交部分视图数据.
我是 MVC 的新手，
我创建了一个局部视图 _CurrentData，其中包含编辑器控件 - 文本框等
并在主视图中添加了提交按钮:
<div class="col-md-12">@Html.Partial("_CurrentData", Model.CurrentItemDetails)
<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/>
视图模型
公共类ProductionViewModel{公共项目详细信息 CurrentItemDetails { 获取；放;}}公共类ItemDetails{公共 int ID { 获取；放;}公共字符串名称 { 获取；放;}}
查看
<div class="panel-heading"><h3 class="panel-title">编辑器</h3>
<div class="panel-body"><div class="row form-group"><div class="col-sm-4 control-label text-right"><strong>名称:</strong>
<div class="col-sm-8 control-label">@Html.TextBoxFor(m => m.Name , new { @class = "form-control" })
现在点击btnSubmit"，我想将数据从 _CurrentData 视图提交到服务器，然后刷新局部视图，
如何做到这一点?
解决方案
你的要求
您要求的功能是 AJAX.AJAX 请求是异步"的，这在最基本的层面上意味着可以发起和响应 HTTP 请求，而无需刷新页面.
正如有人在对您的问题的评论中所写的那样，可以使用 jQuery 并且确实提供了一种很好的方式来执行 AJAX 请求，但是如果您仅针对 AJAX 请求包含整个 jQuery 库，很多人可能会哭.
JavaScript
所以在 JavaScript 中，这 liiiiiiittle 有点复杂，有一些例子 这里.我不会仅仅因为我现在没有很多时间而向您展示如何在 JavaScript 中做到这一点，但我可能会在稍后更新答案.如果可以，我可能会建议您考虑这样做.
jQuery
在 jQuery 中，这很容易.AJAX 请求的文档在这里.
基本上，您需要做的是向服务器发出请求，以便它可以更新您的局部视图数据，然后返回新的局部视图供您替换当前的 HTML.它看起来像:
$.fn.serializeObject = function () {var o = {};var a = this.serializeArray();$.each(a, function () {如果 (o[this.name]) {如果 (!o[this.name].push) {o[this.name] = [o[this.name]];}o[this.name].push(this.value || '');} 别的 {o[this.name] = this.value ||'';}});返回o;};$.ajax({url: '@Url.Content("~/Controller/_CurrentData")',类型:'POST'，数据: {//partialViewForm 与局部视图中的表单元素相关模型:JSON.stringify($('#partialViewForm').serializeObject());},成功:功能(响应){如果(响应){//partialViewDiv 与渲染局部视图的 div 相关$('#partialViewDiv').html(响应);}},错误:函数(xhr，ajaxOptions，throwedError){警报(xhr.status)；警报(抛出错误)；}});
上面假设你有这样的东西作为你的控制器方法:
[HttpPost]公共 ActionResult _CurrentData(ItemDetails 模型){//在这里用模型做东西返回 PartialView("_CurrentData", 模型);}
所以这基本上就是您联系控制器的方式.为了从您的网页调用该 ajax，您需要在表单中的部分视图中有一个按钮，您可以使用 event.preventDefault() 覆盖该按钮.
How to submit partial view data from parent view .
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>
ViewModel
public class ProductionViewModel
{
public ItemDetails CurrentItemDetails { get; set; }
}
public class ItemDetails
{
public int ID { get; set; }
public string Name { get; set; }
}
View
<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>
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?
解决方案
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.
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
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
In jQuery this is easy. The documentation for AJAX requests is here.
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);
}
So this is basically how you'd contact the controller. In order to call that ajax from your webpage, you'd need to have a button in your partial view within the form that you can override using event.preventDefault().
这篇关于从父视图提交局部视图数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
