Question

我不太了解如何使用Ajax.BeginForm以及与我的控制器的交互。这是我的情况。我有一个包含项目列表的页面。当我单击项目旁边的编辑时，将打开一个jquery对话框，其中包含一个包含要编辑的字段的强类型部分视图。当我单击“更新”时，如果视图模型有效，我想保存更改，或者在必要时显示错误。我的问题是当我点击更新。我无法达到可以将序列化数据作为视图模型发送到控制器的程度。

编辑：好的，我发现了1个问题。我的表单标签未正确形成，因此表单字段位于表单之外。现在我对表单的序列化有问题。我收到此消息：无效的JSON原语：section_id。

这是我的序列化字符串：

SECTION_ID = 74＆安培; section_name_en =的+ CF +使命和安培; section_name_fr = LA +任务+ DES + FC＆安培; norm_tab_name_en =简介＆安培; norm_tab_name_fr =简介＆安培; section_tab_id = 2及活性=真安培;活性=假安培; display_order = 100安培;旗帜= banner.jpg＆安培; tab_title_en =简介＆安培; tab_title_fr =简介＆安培; CONTENT_ID = 17＆安培; content_text_en =％3Cdiv％3E％26nbsp％3B％3C％2Fdiv％3E％0D％0A％0D％0A％3Cdiv％3E％3Cstrong％3EThe +的任务+ +的+加拿大+力是+到％3A％3C％2Fstrong％3E％3C％2Fdiv％3E％0D％0A％0D％0A％3Cul +风格％3D％22list样式类型％3A +盘％22％3E％0D％0A％09％3Cli％3Eprotect +加拿大％2C％3C％2Fli％3E％0D％0A％09％3Cli％3Edefend +北+美国+在+ CO +操作+与+的+美国％2C +和％3C％2Fli％3E％0D％0A％09％3Cli％3Econtribute +至+国际+和平+和+安全。％3C％2Fli％3E％0D％0A％3C％2Ful％3E％0D ％0A％0D％0A％3Cdiv％3E％3Cbr +％2F％3E％0D％0AOn +任何+给+一天％2C +约+ 8％2C000 +加+力量+成员+ - +一个+三+我们+的+展开+力+ - + +是准备为+％2C + +中+从事或+的+海外+任务+返回+ + +在家里％2C +加+力。 +能+带+的+最好的可用+军工+资源+从+跨+加+到+熊+上+ A +危机+或+威胁％2C +地方+它+出现％2C +全国性％ 3Cbr +％2F％3E％0D％0A％3Cbr +％2F％3E％0D％0AThe +加+力量+现在+拥有+的+敏捷％2C +高度戒备+特价+运营+力+能力+工作+ +的跨越+ +冲突+ +家+的在+频谱+和+国外％3B +这是+ +联合+工作+组+ 2 +（JTF-2）％2C +在+专用业务由+ +航空+中队％2C +在+合资+核％2C +生物+和+化工+防御+公司％2C +和+的+加+特价+运营+军团％3C％2Fdiv％3E％0D％0A＆放大器; content_text_fr =％3Cdiv％3E％26nbsp％3B％3C％2Fdiv％3E％0D％0A％0D％0A％3Cdiv％3E％3Cstrong％3ELa +任务+ DES +力+ canadiennes + EST + DE％3C％2Fstrong％3E％ 3C％2Fdiv％3E％0D％0A％0D％0A％3Cul％3E％0D％0A％09％3Cli％3Eprot％26eacute％3Bger +了+加拿大％2C％3C％2Fli％3E％0D％0A％09％ 3Cli％3ED％26eacute％3Bfendre + 1％26％2339％3BAm％26eacute％3Brique +杜+北+ EN +协作+ AVEC + LES +％26Eacute％3Btats-紫光+等％3C％2Fli％3E％0D％0A％ 09％3Cli％3Ede + favoriser + LA + Paix的+等+ LA + S％26eacute％3Bcurit％26eacute％3B +丹斯+了+蒙德。％3C％2Fli％3E％0D％0A％3C％2Ful％3E％0D％0A％0D％0A％3Cdiv％3E％3Cbr +％2F％3E％0D％0AChaque +怨妇％2C + ENVIRON + 8 + 000 + militaires + DES +力+ canadiennes +（FC）％2C +搜易得+％26agrave％3B + PEU + PR％26egrave％3BS +了+层+的+号+力+ d％26eacute％3Bployables％2C + SE + PR％ 26eacute％3Bparent +％26agrave％3B + UNE +任务+％26agrave％3B + 1％26％2339％3B％26eacute％3Btranger％2C + Y + participent +河畔+地点+欧+ EN + reviennent。+金+支付％2C + LES +力量+ canadiennes + peuvent + mettre +％26agrave％3B +利润+ LES + meilleures + ressources + militaires +日+ partout + AU +加拿大％2C + EN + CAS +日+ crise +欧+日+如虎添翼％2C + N％26％2339％3Bimporte + 0％26ugrave％3B +河畔+ 1％26％2339％3Bensemble +杜+ territoire。％3Cbr +％2F％3E％0D％0A％3Cbr +％2F％3E％0D％0ALes +力+ canadiennes + SE + SONT +点％26eacute％3Bes + d％26％2339％3Bune + capacit％26eacute％3B + d％26％2339％3Bop％26eacute％3Brations + SP％26eacute％3Bciales +％26eacute％3Blargie +等+ AM％26eacute％3Blior％26eacute％3BE + capables + d％26％2339％3Bintervenir + rapidement +等+ pouvant + mener + DES +运算％26eacute％3Brations +河畔+吹捧+ 1％26％2339％3B％ 26eacute％3Bventail + DES + conflits％2C + AU +加拿大+ COMME +％26agr AVE％3B + 1％26％2339％3B％26eacute％3Btranger +％3B + CES +力+ comprennent + LA + Deuxi％26egrave％3Bme +力+运算％26eacute％3Brationnelle +臂际％26eacute％3Bes +（FOI-2）％2C + 1％26％2339％3BEscadron + d％26％2339％3Bop％26eacute％3Brations + SP％26eacute％3Bciales +（航空）％2C + LA + COMPAGNIE +臂际％26eacute％3Bes +的+ d％26eacute％ 3Bfense + NUCL％26eacute％3Baire％2C + biologique +等+化学公司+等+了+ R％26eacute％3Bgiment + d％26％2339％3Bop％26eacute％3Brations + SP％26eacute％3Bciales +杜+加拿大。％3C ％2Fdiv％3E％0D 0A％

这是我的模型定义：

public class SectionContent
{
    private int _section_tab_id;
    private int _section_id;
    private string _section_name_en;
    private string _section_name_fr;
    private string _tab_title_en;
    private string _tab_title_fr;
    private int _display_order;
    private string _norm_tab_name_en;
    private string _norm_tab_name_fr;
    private string _banner;
    private bool _active;
    private int _content_id;
    private string _content_text_en;
    private string _content_text_fr;
[snip]

}

这是我的PartialView：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ForcesCMS.Models.SectionContent>" %>

<%=Html.ValidationSummary(MyLabels.labels.please_correct_markedfields, new { @class = "validation" })%>


    <fieldset>
        <legend><%=Model.tab_title_en%></legend>
        <input type="hidden" id="section_id" name="section_id" value="<%= Model.section_id%>" />
        <input type="hidden" id="section_name_en" name="section_name_en" value="<%= Model.section_name_en%>" />
        <input type="hidden" id="section_name_fr" name="section_name_fr" value="<%= Model.section_name_fr%>" />
        <input type="hidden" id="norm_tab_name_en" name="norm_tab_name_en" value="<%= Model.norm_tab_name_en%>" />
        <input type="hidden" id="norm_tab_name_fr" name="norm_tab_name_fr" value="<%= Model.norm_tab_name_fr%>" />
        <input type="hidden" id="content_id" name="content_id" value="<%= Model.content_id%>" />
        <div class="formrowFull">
            <div class="formcol">
                <label for="section_tab_id" class="inline"><%=MyLabels.labels.id%></label>
                <%= Html.TextBoxFor(model => model.section_tab_id, new { @class = "smallBoxReadonly" })%>
            </div>
            <div class="formcol">
                <label for="active" class="inline"><%=MyLabels.labels.active%></label>
                <%=Html.CheckBoxFor(model => model.active)%>
            </div>
        </div>

        <div class="formrowFull">
            <div class="formcol">
                <label for="display_order" class="inline mandatory"><%=MyLabels.labels.display_order%></label>
                <%= Html.TextBoxFor(model => model.display_order, new { @class = "smallBox" })%>
                <%= Html.ValidationMessageFor(model => model.display_order)%>
            </div>
            <div class="formcol">
                <label for="banner" class="inline"><%=MyLabels.labels.banner%></label>
                <%= Html.TextBoxFor(model => model.banner, new { @class = "largeBox" })%>
            </div>
        </div>

        <div class="formrowFull">
            <div class="formcol">
                <label for="tab_title_en" class="mandatory"><%=MyLabels.labels.title_en%></label>
                <%= Html.TextBoxFor(model => model.tab_title_en, new { @class = "largeBox" })%>
                <%= Html.ValidationMessageFor(model => model.tab_title_en)%>
            </div>
            <div class="formcol">
                <label for="tab_title_fr" class="mandatory"><%=MyLabels.labels.title_fr%></label>
                <%= Html.TextBoxFor(model => model.tab_title_fr, new { @class = "largeBox" })%>
                <%= Html.ValidationMessageFor(model => model.tab_title_fr)%>
            </div>
        </div>

        <div class="formrowFull"> 
            <div class="formcol">
                <input type="hidden" name="content_id" id="content_id" value="<%=Model.content_id %>" />
                <%= Html.LabelFor(model => model.content_text_en)%>
                <%= Html.TextAreaFor(model => model.content_text_en, new { @class = "ckeditor_tpl" })%>
                <%= Html.ValidationMessageFor(model => model.content_text_en)%>
            </div>
            <div class="formcol">
                <%= Html.LabelFor(model => model.content_text_fr)%>
                <%= Html.TextAreaFor(model => model.content_text_fr, new { @class = "ckeditor_tpl" })%>
                <%= Html.ValidationMessageFor(model => model.content_text_fr)%>
            </div>
        </div>


    </fieldset><%}%>

接下来我会发布我的控制器和脚本，这些是令我困惑的部分。

控制器：

[HttpGet]
    // Called when click on Edit link - data displayed in modal dialog
    public PartialViewResult AddEditRecord(int id)
    {
        ViewData["IsUpdate"] = true;
        SectionContent sc = ContentHandler.GetTabContent(id);
        return PartialView("ContentForm", sc);
    }

    [HttpPost]
    [ValidateInput(false)]
    // Called when clicking on Update in modal
    public PartialViewResult AddEditRecord(SectionContent sc, string cmd)
    {
        // Never valid because model (sc) is always null
        if (ModelState.IsValid)
        {

            try
            {
                //update
                int result = ContentHandler.UpdateSectionContent(sc);
                return PartialView("ContentForm");
            }
            catch { }

        }

        if (Request.IsAjaxRequest())
        {
            return PartialView("ContentForm", sc);
        }
        else
        {
            return PartialView("ContentForm");
        }
    }

脚本：

$.ajaxSetup({ cache: false });

    function DoAjaxUpdate() {
        $.ajax({
            url: $("#frmEdit").attr("action"),
            type: 'POST',
            dataType: "json",
            contentType: 'application/json',
            data: $("#frmEdit").serialize(),
            success: function (result) {
                $('#dialog-edit').html(result);
            }
        });
    }

    $(".editDialog").live("click", function (e) {
        var url = $(this).attr('href');

        $("#dialog-edit").dialog({
            title: 'Edit Tab and Content',
            autoOpen: false,
            resizable: false,
            height: 800,
            width: 600,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(this).load(url);
            },
            close: function (event, ui) {
                $(this).dialog('close');
            },
            buttons: {
                "Update": function () {
                    DoAjaxUpdate();
                },
                "Cancel": function () {
                    $(this).dialog('close');
                }
            }
        });

        $("#dialog-edit").dialog('open');

        return false;
    });

如何正确序列化表单，以便Controller将其识别为有效的ViewModel。然后，一旦确定，我应该在我的Controller操作中做什么？ JsonResult？返回PartialView？的ActionResult？

我一直在浏览大量的SO帖子和其他网站，我在过去几天尝试了很多东西，但没有运气。任何帮助赞赏。谢谢！

Answer 1

在使用表单标记更正错误后，我终于找到了正确的jquery代码来序列化我的表单并将其作为视图模型发送到控制器。

以下是更正的脚本：

function DoAjaxUpdate() {
        $.ajax({
            url: $("#frmEdit").attr("action"),
            type: "POST",
            data: $('#frmEdit :input').serialize(),
            success: function (result) {
                $('#dialog-edit').html(result);
                }
        });
    }

    $(".editDialog").live("click", function (e) {
        var url = $(this).attr('href');

        $("#dialog-edit").dialog({
            title: 'Edit Tab and Content',
            autoOpen: false,
            resizable: false,
            height: 800,
            width: 600,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(this).load(url);
            },
            close: function (event, ui) {
                $(this).dialog('close');
            },
            buttons: {
                "Update": function () {
                    DoAjaxUpdate();
                },
                "Cancel": function () {
                    $(this).dialog('close');
                }
            }
        });

        $("#dialog-edit").dialog('open');

        return false;
    });

MVC3使用Ajax.BeginForm不将ViewModel发送到控制器

1 个答案: