0

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

@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 以获得一些 Dictionary 并将结果绑定回表。问题是如何在运行时创建表行并绑定记录？

图图

4

1 回答 1

0

将表格放入局部视图，并使用 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-15T22:41:31.753 回答