javascript - MVC 3 使用 dropdownlist 和 ajax 获得新模型

Question

我有一个局部 View ，第一次打开时有一个空模型。它由一个下拉列表、文本区域和 2 个文本框组成。当用户从下拉列表中选择一个值时，我想返回并获取一个包含值的模型并填充我的 View 。这是如何完成的？

这是我将部分 View 加载到分割器控件中的初始操作:

Function SelectDisclosures() As ActionResult
        Return PartialView()
End Function

View :

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of Community_Portal_Admin.Disclosure)" %>
<script type="text/javascript">
    function onDropDownListChange(e) {
        var editor;
        if (e.value != '') {
            $.post('<%:Url.Action("_SelectDisclosures","SiteTerms") %>', { id: e.value },
            function (data) {
                if (data != "Error") {
                    editor = $('#DisclosureHTML').data('tEditor');
                    editor.value(data);
                } else {
                    return false;
                }
            });
        }
    }
</script>
<% Using Html.BeginForm("UpdateDisclosure", "SiteTerms", FormMethod.Post, New With {.id = "DisclosuresForm"})%>
    <fieldset>
        <div class="gridFrame">
            <br />
            <%: Html.Label("WebRole", "Role: ")%>
            <%: Html.Telerik().DropDownList() _
                                .Name("WebRoles") _
                                .ClientEvents(Function(e) e.OnChange("onDropDownListChange")) _
                                .DataBinding(Function(binding) binding.Ajax().Select("_SelectWebRoles", "SiteTerms"))
            %>
            <br /><br />        
            <%: Html.Telerik().Editor() _
                                .Name("DisclosureHTML") _
                                .HtmlAttributes(New With {.id = "DisclosureHTML", .style = "height:275px;"})
            %>
            <br />
            <%: Html.TextBoxFor(Function(m) m.ID, New With {.id = "hidID"})%>
            <%: Html.TextBoxFor(Function(m) m.WebRoleID, New With {.id = "hidWebRoleID"})%>
            <%: Html.TextAreaFor(Function(m) m.DisclosureHTML, New With {.id = "hidDisclosureHTML"})%>
            <div class="smallFrameLeft">        
                <%: Html.ActionLink("Cancel", "Index", "Configuration", Nothing, New With {.class = "t-button", .Style = "font-size:12px;"})%>
            </div>
            <div class="smallFrameRight">
                <input type="submit" name="Save" value="Save" class="t-button" />       
            </div>
        </div>
    </fieldset>
<%--   <script type="text/javascript">
       $(".smallFrameRight").click(function (e) {
           var form = $(this).closest("form");
           e.preventDefault();
           $.blockUI({ message: '<div style="text-align: top;"><img src="Images/loading.gif" /><h3> Saving...</h3></div>' });
           $.post(form.attr("action"), form.serialize(), function (data) {
           });
           setTimeout($.unblockUI, 400);
       });
    </script>--%>
<% End Using%>

填充下拉列表的操作:

Function _SelectWebRoles() As ActionResult
    Dim l As IList(Of WebRole) = Nothing
    Try
        l = WebRoleRepository.All()
        Return New JsonResult With {.Data = New SelectList(l, "ID", "Name")}
    Catch ex As Exception
        TempData("ErrorMessage") = "There was a problem during page load: " & ex.Message & vbCrLf & vbCrLf & ex.StackTrace
        Return RedirectToAction("HttpError", "Error")
    Finally
        If Not l Is Nothing Then l = Nothing
    End Try
End Function

这是我最初的操作，我只是返回一个文本值并将其设置到编辑器中。但我宁愿带回整个模型并让它自己填充 View ，这样我也可以更轻松地将整个模型发布回来。

'Function GetDisclosure(ByVal id As Integer) As ActionResult
'    Dim setting As Disclosure = Nothing
'    Dim notice As String = String.Empty
'    Try
'        setting = DisclosureRepository.One(Function(d) d.WebRoleID = id)
'        If Not setting Is Nothing Then notice = HttpUtility.HtmlDecode(setting.DisclosureHTML)
'        Return Content(setting)
'    Catch ex As Exception
'        Return Content("Error")
'    Finally
'        If Not setting Is Nothing Then setting.Dispose() : setting = Nothing
'        notice = Nothing
'    End Try
'End Function

Answer 1

我自己使用一些 jQuery 魔法解决了这个问题，以下是 View :

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of Community_Portal_Admin.Disclosure)" %>

<script type="text/javascript">

function onDropDownListChange(e) {

    var hid;
    var hrole;
    var editor;
    var arry = Array();

    hid = document.getElementById("hidID");
    hrole = document.getElementById("hidWebRoleID");
    editor = $('#DisclosureHTML').data('tEditor');

    if (e.value != '') {
        $.post('<%:Url.Action("GetDisclosure","SiteTerms") %>', { id: e.value },
        function (data) {
            if (data != "NotFound") {
                arry = data.split("|||");
                hid.value = arry[0];
                hrole.value = arry[1];
                editor.value(arry[2]);
            } else {
                hid.value = -1;
                hrole.value = e.value;
                editor.value('');
                return false;
            }
        });
    }
}

</script>

<% Using Html.BeginForm("UpdateDisclosure", "SiteTerms", FormMethod.Post, New With {.id = "DisclosuresForm"})%>
<fieldset>
    <div class="gridFrame">

        <br />
        <%: Html.Label("WebRole", "Role: ")%>
        <%: Html.Telerik().DropDownList() _
                            .Name("WebRoles") _
                            .ClientEvents(Function(e) e.OnChange("onDropDownListChange")) _
                            .DataBinding(Function(binding) binding.Ajax().Select("_SelectWebRoles", "SiteTerms"))
        %>

        <br />
        <br />

        <%: Html.Telerik().EditorFor(Function(m) m.DisclosureHTML) _
                            .Name("DisclosureHTML") _
                            .HtmlAttributes(New With {.id = "DisclosureHTML", .style = "height:275px;"})
        %>

        <br />

        <%: Html.HiddenFor(Function(m) m.ID, New With {.id = "hidID"})%>
        <%: Html.HiddenFor(Function(m) m.WebRoleID, New With {.id = "hidWebRoleID"})%>

        <div class="smallFrameLeft">        
            <%: Html.ActionLink("Cancel", "Index", "Configuration", Nothing, New With {.class = "t-button", .Style = "font-size:12px;"})%>
        </div>

        <div id="saveButton" class="smallFrameRight">
            <input type="submit" name="Save" value="Save" class="t-button" />       
        </div>

        <div id="deleteButton" class="smallFrameRight">
            <input type="submit" name="Delete" value="Delete" class="t-button" />       
        </div>

    </div>
</fieldset>

<script type="text/javascript">

   $("#saveButton").click(function (e) {
       var form = $(this).closest("form");

       e.preventDefault();

       $.blockUI({ message: '<div style="text-align: top;"><img src="Images/loading.gif" /><h3> Saving...</h3></div>' });
           $.post(form.attr("action"), form.serialize(), function (data) {
           });
       setTimeout($.unblockUI, 400);
   });

   $("#deleteButton").click(function (e) {
       e.preventDefault();

       var hid;
       var hrole;
       var editor;

       hid = document.getElementById("hidID");
       hrole = $('#WebRoles').data('tDropDownList').value();
       editor = $('#DisclosureHTML').data('tEditor');

       if (hrole != '') {
           $.blockUI({ message: '<div style="text-align: top;"><img src="Images/loading.gif" /><h3> Deleting...</h3></div>' });
           $.post('<%:Url.Action("DeleteDisclosure","SiteTerms") %>', { id: hrole },
                function (data) {
                    if (data != "Error") {
                        hid.value = -1;
                        editor.value('');
                    } else {
                        return false;
                    }
                });
           setTimeout($.unblockUI, 400);
        }
   });

</script>

<% End Using%>

这是 Controller :

#Region "Disclosure"

    Function SelectDisclosures(ByVal model As Disclosure) As ActionResult

        Try
            ViewData.Model = model

            Return PartialView()

        Catch ex As Exception
            TempData("ErrorMessage") = "There was a problem during page load: " & ex.Message & vbCrLf & vbCrLf & ex.StackTrace
            Return RedirectToAction("HttpError", "Error")
        End Try

    End Function

    Function _SelectWebRoles() As ActionResult

        Dim l As IList(Of WebRole) = Nothing

        Try
            l = WebRoleRepository.All()

            Return New JsonResult With {.Data = New SelectList(l, "ID", "Name")}

        Catch ex As Exception
            TempData("ErrorMessage") = "There was a problem during page load: " & ex.Message & vbCrLf & vbCrLf & ex.StackTrace
            Return RedirectToAction("HttpError", "Error")
        Finally
            If Not l Is Nothing Then l = Nothing
        End Try

    End Function

    Function GetDisclosure(ByVal id As Integer) As ActionResult

        Dim setting As Disclosure = Nothing

        Try
            setting = DisclosureRepository.One(Function(d) d.WebRoleID = id)

            If Not setting Is Nothing Then setting.DisclosureHTML = HttpUtility.HtmlDecode(setting.DisclosureHTML)

            Return Content(setting.ID.ToString & "|||" & setting.WebRoleID.ToString & "|||" & setting.DisclosureHTML)

        Catch ex As Exception
            Return Content("NotFound")
        Finally
            If Not setting Is Nothing Then setting.Dispose() : setting = Nothing
        End Try

    End Function

    <HttpPost()> _
    Function UpdateDisclosure(ByVal setting As Disclosure) As ActionResult

        Try
            If setting.ID = -1 Then
                If TryUpdateModel(setting) Then
                    DisclosureRepository.Insert(setting)
                End If
            End If

            If TryUpdateModel(setting) Then
                DisclosureRepository.Update(setting)
            End If

            Return PartialView(setting)

        Catch ex As Exception
            TempData("ErrorMessage") = "There was a problem during update: " & ex.Message & vbCrLf & vbCrLf & ex.StackTrace
            Return RedirectToAction("HttpError", "Error")
        Finally
            If Not setting Is Nothing Then setting.Dispose() : setting = Nothing
        End Try

    End Function

    <HttpPost()> _
    Public Function DeleteDisclosure(id As Integer) As ActionResult

        Dim setting As Disclosure = Nothing
        Dim x As Integer = 0

        Try
            setting = DisclosureRepository.One(Function(d) d.WebRoleID = id)
            x = setting.ID

            If TryUpdateModel(setting) Then
                DisclosureRepository.Delete(x)
            End If

            Return RedirectToAction("SelectDisclosures", setting)

        Catch ex As Exception
            Return Content("Error")
        Finally
            If Not setting Is Nothing Then setting.Dispose() : setting = Nothing
        End Try

    End Function

#End Region