无法使用jquery对话框和使用Razor MVC 4进行模型绑定将视图模型传递回控制器

时间:2013-08-08 15:20:18

标签: jquery-ui asp.net-mvc-4

我正在努力让我的对话框传回传递给视图并使用绑定值的完整模型。

这是我的剧本:

var scId = 0;
var monthId = 0;
var initializeDialogs = function () {
$('#read-transactions-dialog-form').dialog({
    autoOpen: false,
    width: 650,
    modal: true,
    buttons: {
        "Submit": function () {
            $('#form-read-transactions').submit();
            $(this).dialog("close");
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open:
        function(event, ui) {
            $(this).load("/Month/ViewTransactionsForSubCategory/?scid=" + scId +     "&mid=" + monthId);
    }
});

function loadId(scid, mid) {
scId = scid;
monthId = mid;
}

$(document).ready(function () {
$('a#read-transactions').click(function () {
    $('#read-transactions-dialog-form').dialog('open');
});

initializeDialogs();
});

我的观看对话框:

@model OnlineBudget.WebUI.Models.TransactionsViewModel

@using (Html.BeginForm("SubmitTransactions", "Month", new { tvm = Model.Transactions },   FormMethod.Post, new { id = "form-read-transactions" })) 
{ 
<div id="read-transactions-dialog-form" class="modalDialog" title="Transactions">
<table class="table">

@if (Model.Transactions.Count() > 0)
{
    <tr><th>Date</th><th>Amount</th><th>Description</th><th>Exclude</th><th>Delete</th>    </tr>
}

@for (int i = 0; i < Model.Transactions.Count; i++)
{
    @Html.HiddenFor(model => Model.Transactions[i].Id); @Html.HiddenFor(model =>     Model.Transactions[i].Title); @Html.HiddenFor(model => Model.Transactions[i].Date);   @Html.HiddenFor(model => Model.Transactions[i].Amount); 
    @Html.HiddenFor(model => Model.Transactions[i].SubCategoryId);    @Html.HiddenFor(model => Model.Transactions[i].MonthId);

    if (!Model.Transactions[i].IsDeleted)
    {
        <tr>
            <td>@Model.Transactions[i].Date.ToShortDateString()</td> <td>@Model.Transactions[i].Amount</td><td>@Model.Transactions[i].Title</td>
            <td>@Html.CheckBoxFor(model => Model.Transactions[i].Excluded)</td><td>@Html.CheckBoxFor(model => Model.Transactions[i].IsDeleted)</td>
        </tr>
    }
}
</table>
</div>
}

最后我的控制员:

public ActionResult ViewTransactionsForSubCategory(int scid, int mid)
    {
        TransactionsViewModel tvm = new TransactionsViewModel { MonthId = mid, Transactions = transactionRepository.Transactions.Where(t => t.SubCategoryId == scid &&  t.MonthId == mid).ToList() };

        return PartialView("ReadTransactions", tvm);
    }

    [HttpPost]
    public ActionResult  SubmitTransactions(List<OnlineBudget.Domain.Entities.Transaction> tvm)
    {
        if (ModelState.IsValid)
        {
            //foreach (var tv in tvm.Transactions)
            //    transactionRepository.SaveTransaction(transactionRepository.Transactions.Where(t => t.Id ==  tv.Id).First());
        }
        return RedirectToAction("Index");
    }

我最近将post控制器更改为仅接受列表og事务而不是TransactionsViewModel,但这也没有用。在这种情况下,我一直得到空值或空列表,但是对话框中的表格中确实填充了数据。 任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

我遇到的问题是MVC接受集合作为之前类似的参数。我最终将我的javascript调用切换为$ .ajax帖子($ .post有时也有一些问题)特别包括内容和数据类型

$.ajax({
   type: 'Post',
   dataType: 'json',
   url: 'url-goes-here',
   data: JSON.stringify({ data: data}),
   contentType: 'application/json; charset=utf-8'
});

不如自动绑定好,但它确实将数据发回作为集合。

答案 1 :(得分:0)

我使用这样的$ .postify将复杂的js对象发布到MVC:

e.g。

var postData = {
    id : 123,
    childArray : [
        { subid : 456, value1 : "Foo" },
        { subid : 789, value1 : "Bat" }
    ]
};

$.post("postRoute", $.postify(postData), function(response) {
    // stuff
});

请参阅:http://www.nickriggs.com/posts/post-complex-javascript-objects-to-asp-net-mvc-controllers/