如何使用Json结果在View中填充表格MVC

我有一个带有下拉，两个文本框和一个取消，提交按钮的HTML表单。在页面加载过程中，我使用外部来源的值加载下拉列表。点击提交按钮时，我正在进行服务调用并以JSON形式获得结果，并且该数据用于填充表格。现在这张桌子是静态的。很快，表格结构将发生变化，其内容包括文本必须动态填充。这应该发生在点击提交按钮上。我如何实现这一目标？如何使用Json结果在View中填充表格MVC

@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以使其具有一些字典并将结果绑定回表中。问题是如何创建表行运行时并绑定记录？

楚楚

来源

2013-10-15 Tutu

检查此问题中的'foreach'语法：http://stackoverflow.com/questions/4929538/c-sharp-mvc3-razor-alternating-items-in-a-foreach-list – valverij

把表成的局部视图，并使用Ajax调用基于传递

$('.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); 
     } 
    }); 
});

，然后在你的控制器中的数据刷新局部视图

public PartialViewResult Action(string data1, string data2){ 
    var model = (query database); 
    return PartialView("_TablePartial", model); 
}

然后在表格中放置一个div，结果将放在Content上的一个类（或任何你想要调用它的地方）希望这可以帮助

来源

2013-10-15 22:41:31

如何使用Json结果在View中填充表格MVC

回答

相关问题