通过JQuery将MVC ViewModel数据发布到控制器

时间:2017-02-15 16:30:42

标签: c# jquery asp.net-mvc

我有以下型号:

public class ColourCounts
{
    [Key]
    public int ColourGroup { get; set; }
    public int ColourCount { get; set; }
    public bool Selected { get; set; }
}
public class SizeCounts
{
    [Key]
    public int SizeGroup { get; set; }
    public int SizeCount { get; set; }
    public bool Selected { get; set; }
}

public class New
{
    public New()
    {
        this.Newz = new New();
        this.Colour = new ColourCounts();
        this.ColourList = new List<ColourCounts>();
        this.Size = new SizeCounts();
        this.SizeList = new List<SizeCounts>();
    }

    public New Newz { get; set; }
    public ColourCounts Colour { get; set; }
    public List<ColourCounts> ColourList { get; set; }
    public SizeCounts Size { get; set; }
    public List<SizeCounts> SizeList { get; set; }
}

在我的索引视图中,我有

@model ...Models.New
...
    <div id="colourTable">
        @Html.Partial("_ColourCounts")
        <div class="spinner">
        </div>
        <div>Loading...</div>
    </div>

    <div id="sizeTable">
        @Html.Partial("_SizeCounts")
        <div class="spinner">
        </div>
        <div>Loading...</div>
    </div>

的部分视图
  

_ColourCounts

&安培;

  

_SizeCounts

@model ...Models.New
    <tbody>
        <tr>
            @Html.EditorFor(model => model.ColourList)
        </tr>
    </tbody>

&安培;

@model ...Models.New
    <tbody>
        <tr>
            @Html.EditorFor(model => model.SizeList)
        </tr>
    </tbody>

编辑器模板

@model ..Models.SizeCounts

<tr>
    <td>
        @Html.HiddenFor(m => m.SizeGroup)
        @Html.DisplayFor(m => m.SizeGroup)
    </td>
    <td>
        @Html.HiddenFor(m => m.SizeValue)
        @Html.DisplayFor(m => m.SizeValue)
    </td>
    <td">
        @Html.HiddenFor(m => m.SizeCount)
        @Html.DisplayFor(m => m.SizeCount)
    </td>
    <td>@Html.CheckBoxFor(m => m.Selected)</td>
</tr>

&安培;

@model ..Models.ColourCounts

<tr>
    <td>
        @Html.HiddenFor(m => m.ColourGroup)
        @Html.DisplayFor(m => m.ColourGroup)
    </td>
    <td>
        @Html.HiddenFor(m => m.ColourValue)
        @Html.DisplayFor(m => m.ColourValue)
    </td>
    <td">
        @Html.HiddenFor(m => m.ColourCount)
        @Html.DisplayFor(m => m.ColourCount)
        </td>
        <td>@Html.CheckBoxFor(m => m.Selected)</td>
</tr>

我异步加载索引视图上的这些

<script type="text/javascript" name ="Size">
    $(document).ready(function () {
        //var val = $('#yearSelect3').val();
        $.ajax({
            url: "/News/_SizeCounts",
            type: "GET",
        })
        .done(function (partialViewResult) {
            $("#sizeTable").html(partialViewResult)
        });
    });
</script>

<script type="text/javascript" name="Colour">
    $(document).ready(function () {
        //var val = $('#yearSelect3').val();
        $.ajax({
            url: "/News/_ColourCounts",
            type: "GET",
        })
        .done(function (partialViewResult) {
            $("#colourTable").html(partialViewResult)
        });
    });
</script>

每当用户检查任何复选框时,我想捕获所有值(Newz可以被插入,因为它不会被重新渲染),复选框和隐藏的值,并回发到控制器

public ActionResult ReCalc(New model)
        {
          ....
        }

然后使用Linq查询获得一些新的计数,我将在部分视图中重新渲染EditorTemplates,就像页面加载一样,但是使用新数据。

我无法以可以将其传递给ReCalc控制器中的模型的方式捕获表单数据。

我在jquery中尝试使用

var x = $('#myForm').serializeArray();
                var y = JSON.stringify(x);

虽然jason根据http://jsonlint.com/“有效”而得到了

{"name":"SizeList[0].Selected","value":"true"},{"name":"SizeList[0].Selected","value":"false"}

那里显然存在一个问题,并且在调试时看到控制器中的模型为空。

非常感谢任何帮助让jquery适合这一点。

如果您需要任何进一步的信息,请以外行的方式告诉我,我是T-SQL的人:)谢谢!

0 个答案:

没有答案