通过jquery ajax更新viewModels

时间:2011-05-04 09:46:52

标签: asp.net-mvc-3 jquery jquery-tabs asp.net-mvc-partialview

我想使用asp.net mvc实现产品 我的产品分为几个模块,我想使用jquery选项卡小部件来指导用户提交 我的ProductController将一个viewModel对象列表发送到产品视图 所以我的产品视图如下所示:

@model IList<View.Products.Modules.IModuleView>

<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").tabs({ ajaxOptions:
            {
                type: 'POST', 
                cache: false
            }
        });
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>Tab1</span></a></li>
        <li><a href="#fragment-2"><span>Tab2</span></a></li>
        <li>@Html.ActionLink("Result","Result","Product")</li>
    </ul>
    <div id="fragment-1">
        @{
            var viewModelA = Model.Where(c => c.GetType() == typeof(WebMvcUI.Models.ModelA)).First();
            var viewModelB = Model.Where(c => c.GetType() == typeof(WebMvcUI.Models.ModelB)).First();
            var viewModelC = Model.Where(c => c.GetType() == typeof(WebMvcUI.Models.ModelC)).First();
        }
        @Html.Partial("viewA", viewModelA)
        @Html.Partial("viewB", viewModelB)
        @Html.Partial("viewC", viewModelC)
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor...
    </div>
</div>

到目前为止,这么好。当用户单击最后一个选项卡时,他将调用我的ProductController上的操作Result。这是我的问题:收集部分视图的所有表单信息的最佳方法是什么,将其发送回控制器并更新我的viewModels?

感谢您的任何建议!

1 个答案:

答案 0 :(得分:0)

这是我目前的解决方案:
(我的模块共享一个表单,Presenter对象存储在会话中)

jQuery:

    $('#tabs').bind('tabsselect', function (event, ui) {
        var formToSubmit = $('form:first');
        var jqxhr = $.post(formToSubmit.attr('action'), formToSubmit.serialize(),
            function ShowResult(data) {
                $("#fragment-2").html( data );
            }
        );
    });
控制器:

    [HttpPost]
    public ActionResult Result(FormCollection form) 
    {
        viewModelA = (ViewModelA)Presenter.Modules.Where(c => c.GetType() == typeof(WebMvcUI.Models.ViewModelA)).First();
        viewModelB = (ViewModelB)Presenter.Modules.Where(c => c.GetType() == typeof(WebMvcUI.Models.ViewModelB)).First();

        TryUpdateModel<ViewModelA>(viewModelA, form);
        TryUpdateModel<ViewModelB>(viewModelB, form);

        TransactionResult result = Presenter.CheckBusinessRules(true);

        if (result.IsDirty)
        {
            return Content( result.Message);
        }

        return PartialView();
    }