JQUERY ajax passing value from MVC View to Controller

Question

What I want is to pass the value of txtComments from View (using jquery/ajax) to Controller.

The problem is the ajax/jquery doesn't accept script tags as string. Meaning, when I input any script/html tag in the txtComments the ajax goes to the error function and not being able to go in the controller.

Here is the jQuery:

        $('#btnSaveComments').click(function () {             var comments = $('#txtComments').val();             var selectedId = $('#hdnSelectedId').val();              $.ajax({                 url: '<%: Url.Action("SaveComments")%>?id=' + selectedId + '&comments=' + escape(comments),                 type: "post",                 cache: false,                 success: function (savingStatus) {                     $("#hdnOrigComments").val($('#txtComments').val());                     $('#lblCommentsNotification').text(savingStatus);                 },                 error: function (xhr, ajaxOptions, thrownError) {                     $('#lblCommentsNotification').text("Error encountered while saving the comments.");                 }             });         }); 

Here is the controller:

        [HttpPost]         public ActionResult SaveComments(int id, string comments){              var actions = new Actions(User.Identity.Name);              var status = actions.SaveComments(id, comments);              return Content(status);         } 

I also tried $('#txtComments').serialize() instead of escape(comments) but still the same.

Answer 1

Try using the data option of the $.ajax function. More info here.

$('#btnSaveComments').click(function () {     var comments = $('#txtComments').val();     var selectedId = $('#hdnSelectedId').val();      $.ajax({         url: '<%: Url.Action("SaveComments")%>',         data: { 'id' : selectedId, 'comments' : comments },         type: "post",         cache: false,         success: function (savingStatus) {             $("#hdnOrigComments").val($('#txtComments').val());             $('#lblCommentsNotification').text(savingStatus);         },         error: function (xhr, ajaxOptions, thrownError) {             $('#lblCommentsNotification').text("Error encountered while saving the comments.");         }     }); }); 

Answer 2

Here's an alternative way to do the same call. And your type should always be in CAPS, eg. type:"GET" / type:"POST".

$.ajax({       url:/ControllerName/ActionName,       data: "id=" + Id + "&param2=" + param2,       type: "GET",       success: function(data){             // code here       },       error: function(passParams){            // code here       } }); 

Another alternative will be to use the data-ajax on a link.

<a href="/ControllerName/ActionName/" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#_content">Click Me!</a> 

Assuming u had a div with the I'd _content, this will call the action and replace the content inside that div with the data returned from that action.

<div id="_content"></div> 

Not really a direct answer to ur question but its some info u should be aware of ;).