如何填充表视图中使用JSON按钮的MVC单击结果 [英] How to populate a Table in View with Json results on click of button MVC
问题描述
我有一个HTML表单与下拉菜单中，两个文本框和一个取消，提交按钮。在页面加载我加载从外部源值的下拉。当提交按钮的点击，我想提出一个服务调用并获得JSON作为结果和数据被用来填充表。现在，该表是静态的。很快，表的结构将发生变化，它的内容包括文字，必须动态填充。这应该发生在提交按钮点击。我如何实现这一目标？
I have an HTML form with a dropdown, two text boxes and a cancel, submit buttons. During the page load i am loading the dropdown with values from external source. When clicking of the Submit button, i am making a service call and get result as JSON and that data is used to populate the table. Now the table is a static one. Soon the table structure will change and contents of it including the text has to be dynamically populated. This should happen on the submit button click. How do i achieve this?
@model UI.ViewModels.CViewModel
<div id="mainDiv">
@using (Html.BeginForm("Submit","Test",FormMethod.Post))
{
<div id="entryDiv">
<table id="entryTable">
<tr>
<td class="tdDescription">Select an Plan </td>
<td class="tdAmount" id="tdPlan">
@Html.DropDownListFor(c => Model.SelectedPlan, Model.InstallmentPlans, new { @class = "ddlPlanType", @id = "InstallmentPlans" })<br />
<div id="divSelectPlan" class="errorText hideElement">Please select a plan</div>
</td>
</tr>
<tr>
<td class="tdDescription">Enter an Item Price </td>
<td class="tdAmount" id="tdItemPrice"><span>$ </span>
@Html.TextBoxFor(model => model.ItemPrice, new { @class = "tdText", required = "required" })<br />
</td>
</tr>
<tr>
<td class="tdDescription">Enter a Payment </td>
<td class="tdAmount" id="tdPayment"><span>$ </span>
@Html.TextBoxFor(model => model.Payment, new { @class = "tdText", required = "required" })<br />
</td>
</tr>
</table>
<div id="submitDiv">
<a href="@Url.Action("Index", "DPPC")"><span><span id="spanClear" class="spanButton">Clear</span></span></a>
<input type="submit" id="spanSubmit" value="Submit" class="spanSubmitButton" />
</div>
</div>
<div id="ResultsDivWrapper" class="hideElement">
<div id="resultsDiv"><span id="spnReturnedType"></span> Plan
<table id="tblResults">
<tr>
<td id="tdResultData1">Test Price</td>
<td id="tdResultTestPrice"></td>
</tr>
<tr>
<td id="tdResultDP">DP</td>
<td id="tdResultDPS"></td>
</tr>
<tr>
<td id="tdResultFM">FM</td>
<td id="tdResultFMS"></td>
</tr>
<tr>
<td id="tdResultMP">MP</td>
<td id="tdResultMPS"></td>
</tr>
<tr>
<td id="tdResultFirstPayment">FP</td>
<td id="tdResultFPS"></td>
</tr>
<tr>
<td id="tdResultDD">DD</td>
<td id="tdResultDDS"></td>
</tr>
</table>
</div>
</div>
</div>
脚本调用
$("#spanSubmit").click(function () {
var model = {
Plans: '',
SelectedPlan: seleted,
EPrice: $("#ItemPrice").val(),
DownPayment: $("#Payment").val()
};
Process("/DPPC/Submit", "POST", JSON.stringify(model), "json", "application/json;charset=utf-8", logError, InvokeSuccess);
}
return false;
});
function Process(url,type,data,datatype,contenttype,errorCallback,successCallback) {
$.ajax({ url: url, type: type, data: data, dataType: datatype, contentType: contenttype, error: errorCallback, success: successCallback, async: true, processData: false });
}
function InvokeSuccess(result) {
$("#tdResultTestPrice").html("$" + $("#ItemPrice").val());
$("#tdResultDPS").html("$" + $("#Payment").val());
$("#tdResultFMS").html("$" + result.FM.toFixed(2));
$("#tdResultMPS").html("$" + result.MP.toFixed(2));
$("#tdResultFPS").html("$" + result.FP.toFixed(2));
}
public class PPCResponse
{
public double FM { get; set; }
public double MP { get; set; }
public double FP{ get; set; }
public double DD { get; set; }
..............
}
[HttpPost]
public ActionResult SubmitCViewModel cModel)
{
try
{
PPCResponse response = cRepository.GetInstallmentDetails(cModel.SelectedPlan,cModel.ItemPrice,cModel.DP);
return Json(response, JsonRequestBehavior.DenyGet);
}
catch (Exception ex)
{
int errorCode = LogUtility.ErrorLogCustom(ex.ToString());
Response.StatusCode = 500;
return Json(new { Error = errorCode.ToString() });
}
}
现在表中的内容已被动态生成的。我不得不改变我的PPCResponse有一些解释，并绑定结果回到谈判桌前。问题是你如何创建表行运行并绑定记录？
Now content of the table has to be generated dynamically. I have to change my PPCResponse to have some Dictionary and bind result back to the table. Problem is how do create the table rows runtime and bind the records?
图图
推荐答案
把表到一个局部视图，并使用Ajax调用的基础上传递的数据刷新局部视图
Put the table into a partial view and use an ajax call to refresh the partial view based on the data passed
$('.btnSubmit').on('click', function(){
$.ajax({
url: "@(Url.Action("Action", "Controller"),
type: "POST",
data: { data1: 'data1', data2: 'data2' }
cache: false,
async: true,
success: function (result) {
$(".Content").html(result);
}
});
});
，然后在你的控制器
and then in your controller
public PartialViewResult Action(string data1, string data2){
var model = (query database);
return PartialView("_TablePartial", model);
}
然后把你的表周围的div那里的结果将与类上的内容放在（或任何你想将它命名）
希望这有助于
then put a div around your table where the result will be put with a class on Content (or whatever you want to call it) Hopefully this helps
这篇关于如何填充表视图中使用JSON按钮的MVC单击结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
