0

私は何日もこれに苦労してきました。Ajax 経由で読み込まれた部分ビューのフォームがありますが、Ajax.BeginForm() を使用しているにもかかわらず、Ajax 経由で送信されません。

コントローラ：

<HttpGet()> _
    Public Function PersonalDetailsEdit(PersonalInfo As DetailsViewModel.PersonalDetails) As PartialViewResult
        Return PartialView(PersonalInfo)
    End Function

    <HttpPost()> _
    <AjaxOnly()> _
    Public Function PersonalDetailsEdit(formcollection As FormCollection, model As DetailsViewModel.PersonalDetails) As PartialViewResult
        Return PartialView("PersonalDetails", model)
    End Function

意見：

@ModelType ASK.Everest.ViewModels.DetailsViewModel.PersonalDetails

@Using Ajax.BeginForm("PersonalDetailsUpdate", "Details", New AjaxOptions() With {
                     .InsertionMode=InsertionMode.Replace,
                     .UpdateTargetId = "PersonalDetailsSection",
                     .OnFailure = "alert('fail');"}, New With {.id="PersonalDetailsForm"})
    @Html.ValidationSummary(True)

@<fieldset id="PersonalDetailsUpdate">
    <table class="table table-striped ">
        <tr>
            <th class="display-label">
                <input type="hidden" value="@Html.NameFor(Function(model) model.Title)" />
                @Html.DisplayNameFor(Function(model) model.Title)
            </th>
            <th class="display-label">
                <input type="hidden" value="@Html.NameFor(Function(model) model.FirstName)" />
                @Html.DisplayNameFor(Function(model) model.FirstName)
            </th>
            <th class="display-label">
                <input type="hidden" value="Surname" />
                @Html.DisplayNameFor(Function(model) model.Surname)
            </th>
        </tr>
        <tr>
            <td class="display-field">
                @Html.DisplayFor(Function(model) model.Title)
            </td>
            <td class="display-field">
                @Html.DisplayFor(Function(model) model.FirstName)
            </td>
            <td class="display-field">
                @Html.DisplayFor(Function(model) model.Surname)
            </td>
        </tr>
        <tr>
            <th>
            </th>
            <th class="display-label">
                @Html.DisplayNameFor(Function(model) model.Gender)
            </th>
            <th class="display-label">
                <input type="hidden" value="@Html.NameFor(Function(model) model.DOB)" />
                @Html.DisplayNameFor(Function(model) model.DOB)
            </th>
        </tr>
        <tr>
            <td>
            </td>
            <td class="display-field">
                @Html.DisplayFor(Function(model) model.Gender)
            </td>
            <td class="display-field">
                @Html.DisplayFor(Function(model) model.DOB)
            </td>
        </tr>
        <tr>
            <th>
            </th>
            <th class="display-label" colspan="2">
                @Html.DisplayNameFor(Function(model) model.IDNumber)
            </th>
        </tr>
        <tr>
            <td>
            </td>
            <td class="display-field" colspan="2">
                @Html.DisplayFor(Function(model) model.IDNumber)
            </td>
        </tr>
        <tr>
            <th>
            </th>
            <th class="display-label">
                @Html.DisplayNameFor(Function(model) model.MaritalStatus)
            </th>
            <th class="display-label">
                @Html.DisplayNameFor(Function(model) model.Nationality)
            </th>
        </tr>
        <tr>
            <td>
            </td>
            <td class="display-field">
                @Html.DisplayFor(Function(model) model.MaritalStatus)
            </td>
            <td class="display-field">
                @Html.DisplayFor(Function(model) model.Nationality)
            </td>
        </tr>
    </table>
    @*@Html.ActionLink("Back to List", "Index")*@
    <p class="pull-right">

        <input type="submit" value="Save" />
    </p>
</fieldset>
End Using

私のバンドル:

bundles.Add(New ScriptBundle("~/bundles/ask").Include(
                "~/Scripts/jquery-1.7.*",
                "~/Scripts/jquery-ui*",
                "~/Scripts/jquery.validate*",
                "~/Scripts/jquery.unobtrusive*",
                "~/Content/bootstrap/js/bootstrap.js"))

_Layout.vbtml:

<!DOCTYPE html>
<html lang="eng">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewData("Title")</title>
    @Styles.Render("~/Content/css")
    @RenderSection("styles", required:=False)

    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/ask")

    @RenderSection("scripts", required:=False)
</head>
<body>
    @RenderBody()
</body>
</html>

多くの欲求不満の後にあきらめ、次のようにクライアント側でMVVMを使用してJQuery + Knockoutルートに進むことにしました：

<script type="text/javascript">
var data = @Html.Raw(Json.Encode(Model)) ;
var PersonalDetailsVM = ko.mapping.fromJS(data);
ko.applyBindings(PersonalDetailsVM, $('section#PersonalDetails')[0]);
</script>

今、私は JSON/MVC Date 変換に苦労しています.MVC4はデフォルトでJSON.NETを使用するはずだったと思いましたか? 面倒な場合は別の質問を投稿します。

4

1 に答える 1

0

頭を悩ませず、jQuery を使用してください。Microsoft は基本的に、ASP.NET AJAX に「飛び乗って」おり、現在 jQuery をサポートしています。

http://weblogs.asp.net/toddanglin/archive/2010/04/19/microsoft-ajax-client-library-is-dead-long-live-jquery.aspx

http://stephenwalther.com/archive/2010/03/16/microsoft-jquery-and-templating.aspx

于 2012-08-07T15:38:03.813 に答える