MVC - Jquery UI - 对话框 - 问题答案

【问题标题】：MVC - Jquery UI - Dialog - QuestionMVC - Jquery UI - 对话框 - 问题
【发布时间】：2011-06-22 04:58:02
【问题描述】：

我试图在不使用 AjaxActionLink 的情况下在 MVC 中抛出一个对话框窗口。我在这个例子中使用的是 jquery ui 1.8.13。

请考虑以下 sn-ps：

public class ModalViewModel
{
    public string Title { get; set; }
    public string Description { get; set; }
}

还有控制器：

private ActionResult GetVisitors(VisitorSearchViewModel model)
    {
        VisitorSearchResponse response =
            .... Omitted for brevity

        if (response.Success)
        {
            return View("VisitorList", response.Visitors.ToList());
        }
        else
        {
            return RedirectToAction("Error");
        }
    }

    public PartialViewResult Error()
    {
        return PartialView("Modal", 
                            new ModalViewModel() 
                            { 
                                Title = "Test Title", 
                                Description = "Test Description" 
                            });
    }

最后，Modal 共享视图：

@model CraftTraxNG.Model.ViewModels.ModalViewModel

<script type="text/javascript">
$(document).ready(function () {
    $("#errorMessage").dialog(
        { autoOpen: true,
          title: '@Model.Title',
          width: 500,
          height: 100,
          modal: true,
          buttons:{ "OK": function () {
                        $(this).dialog("close"); }
          }
       });
    });

<div id="errorMessage" style="display:none;">
    @Model.Description
</div>

当遇到错误时，它会写出部分视图内容；即，它成功地创建了具有适当样式的对话窗口。我的问题是我想在我当前所在的视图上渲染部分视图。我以前从未以这种方式使用过它。到目前为止，当它呈现该部分视图时，我会丢失当前所在视图的内容。

通常，我可以使用 AjaxActionLink 并设置一个我希望对话框呈现到的 div 标签，然后替换它或在之后、之前等插入它。

在这种情况下，我将前往服务并获取响应服务器端，如果它不成功，我需要一种方法来用这个局部视图替换常规视图上的一些 div 标记。

感谢任何帮助。

谢谢。

【问题讨论】：

标签： asp.net-mvc-3 jquery-ui-dialog

【解决方案1】：

我遇到了这个问题，但我还没有想出一个理想的解决方案。这是我通常做的事情。

<a href="#" id="loadsContentOrError">Click Me</a>

$(function() {
    $("#loadsContentOrError").click(e){
        e.preventDefault();
        $.ajax({
            url: '<%: Url.Action("Error") %>',
            success: function(html) {
                html = $(html);
                if(html.find('.errorMessage').length > 0) {
                    $('#divToLoadContentTo").append(html);
                } else {
                    $('#divToLoadContentTo").html(html);
                }
            }
        });
    });
});

这很粗略，但它为您提供了一个很好的起点。

【讨论】：