Jquery Question posted in
The official Jquery Api Documentation can be found here.

Passing a jQuery variable to @Url.Action in ASP.NET MVC

This is an example of a function that takes the ID of a thumbnail image and when clicked brings up the full image in a modal:

$('.imageLandscapeFloatLeft').on('click', function () {
var vIDString = this.getAttribute('id');
if (vIDString.indexOf("image_") >= 0) {
    var vID = vIDString.substring(6);
    if ($.isNumeric(vID)) {
        jQuery.ajax({
            url: '@Url.Action("ReturnSoftwareImage", "Business")',
            type: 'POST',
            data: { ImageID: vID },
            success: function (response) {
                if (typeof (response) == 'object') {
                    var vAlt = (response.alt);
                    var vLink = (response.link);
                    ModalInformation(vAlt, vLink);

                }
                else {
                    ModalError(response);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                ModalError(textStatus + " - " + errorThrown);
            }
        })
    }
}
})

It works fine, but because there are so many pages using this function, I wanted to simplify the code and put a chunk on _Layout and just pass the parameters to it like this…

$('.imageLandscapeFloatLeft').on('click', function () {
var vIDString = this.getAttribute('id');
if (vIDString.indexOf("image_") >= 0) {
   
    OpenImageModal("Business", "ReturnImage", "ReturnWebImage", vIDString, "6");
}
})

function OpenImageModal(ControllerName, ActionResultName, ActionData, IDString, IDLength) {

var vID = IDString.substring(IDLength);
          
if ($.isNumeric (vID)) {
    alert(vID);
    jQuery.ajax({
        url: '@Url.Action()',
        type: 'POST',
        data: { ActionData: vID },
        success: function (response) {
            if (typeof (response) == 'object') {
                var vAlt = (response.alt);
                var vLink = (response.link);
                ModalInformation(vAlt, vLink);
            }
            else {
                ModalError(response);
            }

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            ModalError(textStatus + " - " + errorThrown);
        }
    })
}
}

I am trying to find a way to pass the variables (in this case ControllerName and ActionResultName) to the Ajax url @Url.Action() – but so far wrapping it in quotes and other methods have failed.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Changing

     @Url.Action

    to

     url: "/" + ControllerName + "/" + ActionName,

    Works


  2. 0

    you need to mapped valued to Js variable and then used it in Share view
    like :
    your main view :

      <script type="text/javascript">
        var yourUrls= "@Url.Action("Action", "ControllerName", new { area = "SomeNAme" })";
    </script>

    and in sharedView :

     ajax: {
      url: yourUrls,
      dataType: 'json',
      delay: 250,
      data: function (params) {
          return {
              q: params.term, // search term
              page: params.page
          };
      },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search