如何使用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

回答

相關問題