MVC 3使用下拉列表和ajax来获取新模型

MVC 3 using dropdownlist and ajax to get a new model

本文关键字:新模型 获取 模型 ajax 下拉列表 MVC      更新时间:2023-09-26

我有一个局部视图,当第一次打开有一个空模型。它由一个下拉列表,文本区域和2个文本框组成。当用户从下拉菜单中选择一个值时,我想返回并获取一个带有值的模型并填充我的视图。这是如何做到的呢?

下面是我将部分视图加载到拆分器控件中的初始操作:

Function SelectDisclosures() As ActionResult
        Return PartialView()
End Function
视图:

<%@ 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

这是我最初的操作,我只是简单地返回一个文本值并将其设置到编辑器中。但我更愿意带回整个模型让它自己填充视图,这样我也可以更容易地发布整个模型。

'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

我自己使用了一些jQuery魔法,这是视图:

<%@ 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%>

这是控制器:

#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