Javascript有条件地构建mvc actionlink

Question

This is in a VB.NET MVC 3 Razor view and fires when a JsonResult of success is returned. The problem is that I would like to conditionally build an actionlink if data.Object.Status == 'Completed';

I have looked around and nothing seems to be fitting at all to solve this. This is what the actionlink should look like in razor:

@Html.ActionLink("Completed(Print Cert)", "Ind_Cert", "Printing", New With {.firstName = currentItem.firstName, .lastname = currentItem.lastName, .classRef = currentItem.course_ref, .cNumber = currentItem.conf_number}, Nothing)

And this is the javascript function that will do it. Currently it just Places the contents of data.Object.Status . Which should only show like that when data.Object.Status != 'Completed' ;

  function updateSuccess(data) {
    if (data.Success == true) {
        //we update the table's info
        var parent = linkObj.closest("tr");
        parent.find(".CompletedClass").html(data.Object.Status);
        //now we can close the dialog
        $('#updateDialog').dialog('close');
        //twitter type notification
        $('#commonMessage').html("Update Complete");
        $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

Below is what I am thinking will work I am still trying to figure it out but this is a rough markup of it.

   function updateSuccess(data) {
    if (data.Success == true) {
        //we update the table's info
        var parent = linkObj.closest("tr");
        var d = parent.find(".CompletedClass");
        if (data.Object.Status == 'Completed') {
            d.html = @Html.ActionLink("Completed(Print Cert)", "Ind_Cert", "Printing", New With {.firstName = Model(0).firstName, .lastname = Model(0).lastName, .classRef = Model(0).Completed_Class, .cNumber = Model(0).conf_number}, Nothing) 
            }


        //now we can close the dialog
        $('#updateDialog').dialog('close');
        //twitter type notification
        $('#commonMessage').html("Update Complete");
        $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
    }
    else {
        $("#update-message").html(data.ErrorMessage);
        $("#update-message").show();
    }
}

Answer 1

What you suggest right now should work, there is a typo on your code assigning the HTML, you probably know it but the way you add HTML to an element is (You have a = sign which is not valid) :

d.html (@Html.ActionLink("Completed(Print Cert)", "Ind_Cert", ....) 

Assuming is an element that accepts html, otherwise, use the "text" function.

In any case, my recommendation would be to generate the HTML before hand but have it hidden on the page (unless you have thousands of them, of there are security concerns). Then you just have your Javascript simply show the element:

 var parent = linkObj.closest("tr");
 var linkElement = parent.find(".mylinkelement-class");
    if (data.Object.Status == 'Completed') {
        linkElement.show();
        }

This should give you the benefit of allowing better separation between your Javascript and your MVC code.

HTH, -Covo

Answer 2

You should update your code to something like this

d.html('@Html.ActionLink("Completed(Print Cert)", "Ind_Cert", "Printing", New With {.firstName = Model(0).firstName, .lastname = Model(0).lastName, .classRef = Model(0).Completed_Class, .cNumber = Model(0).conf_number}, Nothing)');

To assign html with jQuery you should use jQuery.html() .

The Razor @Html.ActionLink will print HTML to the page, to not break your Javascript, put those inside quotes d.html('@Html...')