在按钮单击上显示部分视图

时间:2014-03-03 10:21:19

标签: jquery ajax asp.net-mvc-4 partial-views

模特中的类:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CalcFactory.Models
{
public partial class TableDetails
{
    public String Dates { get; set; }
    public double InvoiceAmount { get; set; }
    public String InterestRate { get; set; }
    public double InterestAmount { get; set; }
    public double Amortization { get; set; }
    public double CapitalBalance { get; set; }
}

public partial class TableDetails
{
    public List<TableDetails> Tables { get; set; }
}
}

家庭控制器:

public ActionResult CreateCalculation()
    {
        return View();
    }
    public ActionResult TableDetails()
    {
        return PartialView("TableDetail");
    }

我的部分视图(TableDetails):

@model IEnumerable<CalcFactory.Models.TableDetails >
@using CalcFactory.Models
@if (Model != null)
    {
        <div class="grid">
            <table cellspacing="0" width="80%">
                <thead>
                    <tr>
                        <th>
                            Dates
                        </th>
                        <th>
                            Invoice amount
                        </th>
                        <th>
                            Interest rate
                        </th>
                        <th>
                            Interest amount
                        </th>
                        <th>
                            Amortization
                        </th>
                        <th>
                            Capital balance
                        </th>

                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td align="left">
                                @item.Dates
                            </td>
                            <td align="left">
                                @item.InvoiceAmount
                            </td>
                            <td align="left">
                                @item.InterestRate
                            </td>
                            <td align="left">
                                @item.InterestAmount
                            </td>
                            <td align="left">
                                @item.Amortization
                            </td>
                            <td align="left">
                                @item.CapitalBalance
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

        </div>

    }

我希望部分视图显示在哪里:

<input type="submit" id="anCalcBtn" class="calcBtn" name="anSubmitBtn" value="Calculate" title="Calculate your calculation"></input>
<div class="calcDetail" id="anCalcDetail">
                    @model CalcFactory.Models.TableDetails
                        @{Html.Partial("TableDetail");}
                    </div>

我的JS:

$('#anCalcBtn').click(function () {
$('#anCalcDetail').load('/Home/TableDetails/');

});

为什么这不适合我?我有这个局部视图,我想在提交点击上显示。我不确定我是否正确使用Controller,但是这个局部视图假设显示在CreateCalculation页面中。

1 个答案:

答案 0 :(得分:0)

我尝试了你的代码,断点确实击中了TableDetails动作。 问题是没有模型发送到TableDetail视图,因此不返回HTML。 我已经改变了你的TableDetail动作并创建了一个模拟模型:

public ActionResult CreateCalculation()
{
    return View("Index");
}
public ActionResult TableDetails()
{
    List<TableDetails> tdList = new List<TableDetails>();
    TableDetails td = new TableDetails();
    td.Dates = "Dates";
    td.InterestAmount = 10;
    td.InvoiceAmount = 5;
    tdList.Add(td);
    return PartialView("TableDetail", tdList);
}

此代码返回一个在Calculate按钮

下面有一行的表