2014-01-22 15 views
0

我一直在使用文章ASP.NET MVC: Ajax Dialog Form Using jQuery UI中的代碼,它主要工作。我創建了一個列出記錄的網格,每條記錄都有一個鏈接來打開一個對話框來編輯記錄。記錄更改後,按下保存按鈕並使用ajax更新網格。這很好,但問題出現在網格的第一條記錄保存和ajax刷新之後。如果再次單擊編輯記錄的鏈接,則對話框不會出現,只顯示局部視圖。我猜測,但似乎我試圖再次提出的部分觀點不承認父容器。有任何想法嗎?MVC對話框保存刷新錶停止工作

顯示包含電網的局部視圖:

<div id="VehicleHold"> 
    @Html.Partial("_VehicleHold") 
</div> 

局部視圖,使彈出的對話框:

@using VehicleWeb.MVCHelpers 

@{ 
    int agreementNumber = 0; 
    var countData = ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>; 

    if (countData != null) 
    { 
     if (countData.Count() > 0) 
     { 
      agreementNumber = (int)countData.DefaultIfEmpty().First().AgreementNumber; 

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"> 
       <thead> 
       <tr class="table-header"> 
        <th>Edit</th> 
        <th>Delete</th> 
        <th> 
         Type 
        </th> 
        <th> 
         Year 
        </th> 
        <th> 
         Make/Model 
        </th> 
        <th> 
         Plate 
        </th> 
        <th> 
         VIN 
        </th> 
        <th> 
         Num Pass 
        </th> 
       </tr> 
      </thead> 
       <tbody> 
      @{ 
       foreach (var item in (ViewBag.VehicleHoldViewModel as System.Collections.Generic.IEnumerable<VehicleWeb.Model.VehicleHoldViewModel>)) 
       { 
        <tr> 
         <td> 
          @Html.ImageDialogLink("UpdateVehicleHold", "Exposure", new { id = item.RID }, "Edit Hold Vehicle", "VehicleHold", Url.Action("RefreshVehicleHold/" + agreementNumber), Html.ResolveUrl("~/pics/edit-button.png"), "Edit Hold Vehicle", "600", "800", new { style = "text-decoration:none;" }, new { style = "text-decoration:none; border-style: none;" }) 
         </td> 
         <td> 
          <div title="Vehicle Year">@item.EditType.ToString()</div> 
         </td> 
         <td> 
          <div title="Vehicle Year">@item.AutoYear.ToString()</div> 
         </td> 
         <td> 
          <div title="Vehicle Make/Model">@item.MakeModel.ToString()</div> 
         </td> 
         <td> 
          <div title="Vehicle Plate Number">@item.DistVehNo.ToString()</div> 
         </td> 
         <td> 
          <div title="Vehicle VIN">@item.IDNumber.ToString()</div> 
         </td> 
         <td> 
          <div title="Number Of Passengers">@item.NumOfPassengers.ToString()</div> 
         </td> 
        </tr> 
       } 
      } 
      </tbody> 
      </table> 
     } 
    } 
} 

我新的發問這裏,所以才讓我知道如果你需要看到更多的代碼。

編輯: 我不知道jQuery文件的位置是否重要。我今天一直在搞這個職位,並沒有找到成功。我在主窗體上有用於連接對話框的jQuery文件。在AJAX刷新DIV之後,編輯鏈接似乎鬆散了關於任何父代碼的所有知識。我最新的理論是這可能與這個代碼有關。難道是因爲它已經準備好了嗎?

$(document).ready(function() { 
    $.ajaxSetup({ 
     cache: false 
    }); 

    // Wire up the click event of any current or future dialog links 
    $('.dialogLink').on('click', function() { 
     var element = $(this); 

     // Retrieve values from the HTML5 data attributes of the link   
     var dialogTitle = element.attr('data-dialog-title'); 
     var dialogWidth = element.attr('data-dialog-width'); 
     var dialogHeight = element.attr('data-dialog-height'); 
     var updateTargetId = '#' + element.attr('data-update-target-id'); 
     var updateUrl = element.attr('data-update-url'); 

     // Generate a unique id for the dialog div 
     var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000) 
     var dialogDiv = "<div id='" + dialogId + "'></div>"; 

     // Load the form into the dialog div 
     $(dialogDiv).load(this.href, function() { 
      $(this).dialog({ 
       modal: true, 
       resizable: false, 
       title: dialogTitle, 
       closeOnEscape: false, 
       width: dialogWidth, 
       height: dialogHeight, 
       buttons: [ 
        { 
         text: "Save", 
         icons: { primary: "ui-icon-check" }, 
         click: function() { 
          // Manually submit the form       
          var form = $('form', this); 
          if ($(form).valid()) { 
           $(form).submit(); 
           $(this).dialog('close'); 
          } 
         }}, 
         { 
          text: "Cancel", 
          icons: { primary: "ui-icon-closethick" }, 
          click: function() { 
           $(this).dialog('close'); 
           $(this).empty(); 
          } 
         }] 
     }); 

      // Enable client side validation 
      $.validator.unobtrusive.parse(this); 

      // Setup the ajax submit logic 
      wireUpForm(this, updateTargetId, updateUrl); 
     }); 
     return false; 
    }); 
}); 

function wireUpForm(dialog, updateTargetId, updateUrl) { 
    $('form', dialog).submit(function() { 

     // Do not submit if the form 
     // does not pass client side validation 
     if (!$(this).valid()) { 
      return false; 
     } 

     // Client side validation passed, submit the form 
     // using the jQuery.ajax form 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function (result) { 
       // Check whether the post was successful 
       if (result.success) { 
        // Close the dialog 

        $(dialog).dialog('close'); 
        $(dialog).empty(); 

        // Reload the updated data in the target div 
        $(updateTargetId).load(updateUrl); 
       } else { 
        alert('failure'); 
        // Reload the dialog to show model errors      
        $(dialog).html(result); 

        // Enable client side validation 
        $.validator.unobtrusive.parse(dialog); 

        // Setup the ajax submit logic 
        wireUpForm(dialog, updateTargetId, updateUrl); 
       } 
      } 
     }); 
     return false; 
    }); 
} 

回答

0

它有時會發生,當我們請在主視圖中的腳本將首次綁定事件,但回傳後,將無法正常工作,嘗試在局部視圖移動腳本,如果它不沒有工作分享一些代碼,並會看到什麼是錯的

+0

我添加了設置對話框的代碼。這個代碼可能是問題嗎? – Filjan

+0

將這個$('。dialogLink')。on('click',function()整個函數在局部視圖中,並讓我知道它是否工作 –

+0

這是違規行,但我不必移動它。 $('。dialogLink')。live('click',function(){and this does not work $('。dialogLink')。on('click',function(){。我不確定是什麼不同之處在於「活」和「開」之間,但我最好弄清楚,因爲這是使這項工作的關鍵。感謝您的幫助。 – Filjan