ASP.NET MVC ActionLink mit Javascript Funktion

Question

Ich habe eine Liste mit Aktionslinks. Alle Links müssen eine Teilansicht per Parameter im modalen Popup laden.

Links:

@model IEnumerable<string> 

<ul> 
    @foreach (var item in Model) 
    { 
     <li> 
      @Html.ActionLink(item, "MyAction", null, new {code = item}, new {@class = "myclass" }) 
     </li> 
    } 
</ul> 

MyAction:

public ActionResult MyAction(string code) 
{ 
    // logic 
    var model = ... 

    return PartialView("_MyPartialView", model); 
} 

Meine Ansicht mit modalen Popup-und JavaScript-Funktion:

<script type="text/javascript">  
$(function() { 
    $(function() { 
     $('#my-dialog').dialog({ 
      autoOpen: false, 
      width: 400, 
      modal: true 
     }); 

     $('.myclass').click(function (e) { 
      e.preventDefault(); 
      $('#my-dialog').load(this.href, function() { 
       $(this).dialog('open'); 
      }); 
      return false; 
     }); 
    }); 
</script>  
<div id="my-dialog"></div> 

Aber js Funktion auf Klick Actionlink funktioniert und nicht Teilansicht Lade einfach eine neue Seite ein. Ich versuche, Break-Point in dieser Funktion zu machen, aber Break-Point funktioniert nicht, was bedeutet, dass die Funktion nicht per Click-Ereignis aufgerufen hat. Vielen Dank für die Beratung

Answer 1

Try this .......

<script type="text/javascript">  
$(function() { 
    $(function() { 
     $('#my-dialog').dialog({ 
      autoOpen: false, 
      width: 400, 
      modal: true 
     }); 

      $(body).on('click','.myclass',function(e){  
      e.preventDefault(); 
      $('#my-dialog').load(this.href, function() { 
       $(this).dialog('open'); 
      }); 
      return false; 
     }); 
    }); 
</script>  
<div id="my-dialog"></div> 

Answer 2

Nach Ihrer Ansicht nach der einzige Weg, gerendert wird eine Teilansicht ist über einen Ajax-Aufruf zu laden, die die Teilansicht auf Ihre Popup liefert

HTML

@model IEnumerable<string> 

<ul> 
@foreach (var item in Model) 
{ 
    <li> 
     <a onclick="showModal('@item')" class="myclass">item</a> 
    </li> 
} 

<div id="my-dialog"></div> 

JQuery

<script type="text/javascript">  
$(function() { 
    $('#my-dialog').dialog({ 
     autoOpen: false, 
     width: 400, 
     modal: true 
    }); 

function showModal(code) { 
     $.ajax({ 
      url: "myController/MyAction?code="+code, 
      type: 'get', 
      success: function (result) { 
       $('#my-dialog').html(result); 
       $('#my-dialog').dialog('open') 
      }, 
      } 
     }); 
    } 
</script> 

Aktion:

public ActionResult MyAction(string code) 
{ 
// logic 
var model = ... 

return PartialView("_MyPartialView", model); 
}