ASP.NET MVC 4 JQuery對話框

我想從ASP.NET MVC 4模板網站修改JavaScript，以便模板附帶的對話框可以用於任何具有「」的鏈接。 ajax鏈接「類在我的代碼。所以，我沒有在AjaxLogin.js一些變化，現在看起來是這樣的：ASP.NET MVC 4 JQuery對話框

//... 

$('.ajax-link').each(function() { 
    $(this).click(function (e) { 
     var link = $(this), 
      url = link.attr('href'); 

     var separator = url.indexOf('?') >= 0 ? '&' : '?'; 

     $.get(url + separator + 'content=1') 
     .done(function (content) { 

      var dialog = $('<div class="modal-popup"">' + content + '</div>') 
       .hide() // Hide the dialog for now so we prevent flicker 
       .appendTo(document.body) 
       .filter('div') // Filter for the div tag only, script tags could surface 
       .dialog({ // Create the jQuery UI dialog 
        dialogClass: 'fi-dialog', 
        title: link.data('dialog-title'), 
        modal: true, 
        resizable: false, 
        draggable: true, 
        width: link.data('dialog-width') || 600, 
        beforeClose: function() { resetForm($(this).find('form')); } 
       }) 
       .find('form') // Attach logic on forms 
        .submit(formSubmitHandler) 
       .end(); 

      dialog.dialog('open'); 
     }); 

     // Prevent the normal behavior since we use a dialog 
     e.preventDefault(); 
    }); 
}); 

//...

然後我加入所有我想要的鏈接屬性class =「Ajax的鏈接」到一個jQuery的對話框中顯示。

但它不工作。實際上，對話框只打開我在頁面內部單擊的FIRST鏈接，在關閉對話框後，我可以單擊任何其他不會出現的鏈接。我在這裏做錯了什麼？

來源

2012-03-18 Alaor

的老路上：http://stackoverflow.com/questions/8541821/how-to-simplify-my-statefull-interlaced-modal-dialogs-in-asp-net-mvc – 2012-09-05 15:53:25

實際上，您只需要對AjaxLogin.js腳本進行2個非常微小的修改即可完成此工作。

第一個修改是朝向文件的結尾，您有一個選擇器數組。所有你需要做的就是添加.ajax-link選擇：

// List of link ids to have an ajax dialog 
var links = ['#loginLink', '#registerLink', '.ajax-link'];

在第2修正是resetForm函數內，以增加一個檢查，如果有嘗試重置前一種形式。因爲如果沒有你呈現，當你試圖關閉對話框，你會得到一個錯誤的部分內的一種形式：

var resetForm = function ($form) { 
    // make sure that there's a form before attempting to reset its elements 
    if ($form.length < 1) { 
     // No form inside the partial => we have nothing more to do here 
     return; 
    } 

    // We reset the form so we make sure unobtrusive errors get cleared out. 
    $form[0].reset(); 

    getValidationSummaryErrors($form) 
     .removeClass('validation-summary-errors') 
     .addClass('validation-summary-valid') 
};

現在你可以有：

@Html.ActionLink(
    "Foo", 
    "foo", 
    null, 
    new { @class = "ajax-link", data_dialog_title = "hello" } 
)

有相應的動作：

public ActionResult Foo() 
{ 
    // return a PartialView or whatever you want to popup in the dialog 
    return Content("hello world from a jQuery Dialog"); 
}

，它會顯示一個對話框，裏面的富行動，正是它的LogOn和Register行動以同樣的方式的結果。

來源

2012-03-18 23:05:18

它的工作！謝謝！有點。我不知道它是否應該成爲另一個問題，但現在每次點擊na鏈接時它都會打開一個對話框，但它總是顯示相同的內容，即使我點擊另一個鏈接，就好像在緩存第一個內容對話框打開，每次點擊另一個鏈接時都不刷新它。我錯過了什麼？ – Alaor 2012-03-24 14:26:12

$('.ajax-link').each(function() { 
    $(this).click(function (e) { 
     var link = $(this), 
      url = link.attr('href'); 

     var separator = url.indexOf('?') >= 0 ? '&' : '?'; 

     //clear all cashed dialog form 
     $("div.modal-popup").remove();

。。。

來源

2012-03-27 13:32:14 Hamid

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" 
     type="text/css" /> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var UIDialogId = 0; 

      $('.UIDialogOpen').live('click', function (e) { 
       e.preventDefault(); 

       UIDialogId++; 

       $('<div/>', { 
        'id': $(this).attr('data-dialog-id') !== undefined ? $(this).attr('data-dialog-id') : 'UIDialog' + UIDialogId, 
        'class': 'UIDialog' 
       }).appendTo('body').dialog({ 
        title: $(this).attr('data-dialog-title') !== undefined ? $(this).attr('data-dialog-title') : 'Message', 
        position: ['center', 'center'], 
        modal: true, resizable: false, zIndex: 10000, autoOpen: true, 
        minWidth: $(this).attr('data-dialog-minwidth') !== undefined ? $(this).attr('data-dialog-minwidth') : '300px', 
        minHeight: $(this).attr('data-dialog-minheight') !== undefined ? $(this).attr('data-dialog-minheight') : '300px', 
        maxWidth: $(this).attr('data-dialog-maxwidth') !== undefined ? $(this).attr('data-dialog-maxwidth') : '300px', 
        maxHeight: $(this).attr('data-dialog-maxheight') !== undefined ? $(this).attr('data-dialog-maxheight') : '300px', 
        close: function (event, ui) { 
         $(this).remove(); 
        } 
       }) 
       //.load(this.href); 

       //Or //Use .load(this.href); and comment or delete below append line. 

       .append('<h1>Hi.. This is Testing </h1> <input type="button" class="UIDialogCancel" value="Cancel" /> <input type="button" class="UIDialogClose" value="Close" />'); 


       $('.UIDialogClose, .UIDialogCancel').live('click', function (e) { 
        var obj = $(this) 
        e.preventDefault(); 
        obj.parents('.UIDialog').dialog('close'); 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <a href="http://3.bp.blogspot.com/-atcX8smV6wA/T5ULj6LU4fI/AAAAAAAAAFg/oK08hPLOmWI/s1600/between.png" 
     class="UIDialogOpen" data-id="bloger">Bloger</a> 
    <br /> 
    <div> 
     @Html.ActionLink("ActionLinkName", "MethodeName", "ControllerName", new { Id =2 
     }, new { @class = "UIDialogOpen", data_dialog_title = "UI Dialog Message" }) 
    </div> 
    <div> 
     @Html.ActionLink("ActionLinkName", "MethodeName", "ControllerName", null, new { 
     @class = "UIDialogOpen", data_dialog_title = "UI Dialog MEssage" }) 
    </div> 
</body> 
</html>

來源

2012-04-26 12:12:14 Thulasiram

現場演示請參閱此鏈接：http://jsfiddle.net/nanoquantumtech/At4fW/ – Thulasiram 2012-04-26 12:12:34

ASP.NET MVC 4 JQuery對話框

回答

相關問題