jquery ajax GET pass properties from razor view model

Question

In the editors in view i enter both name and 0 as socialsecuritynumber but wrong method in controller is called, that one with only name as parameter and the value of that is "0", that will say the value of socialsecuritynumber editor. What am I doing wrong ?

EDIT: When i check what url that is invoked in chrome developer tools it says: localhost:51446/Person//0

PersonViewModel

public string Name { get; set; }
public int SocialSecurityNumber { get; set; }

PersonController

[HttpGet]
[Route("Person")]
public ActionResult Index()
{
   return View();
}

[HttpGet]
[Route("Person/{name}")]
public JsonResult GetProduct(string name)
{
   var person = new PersonViewModel { Name = id, SocialSecurityNumber = 12345678 };
   return Json(person, JsonRequestBehavior.AllowGet);
}

[HttpGet]
[Route("Person/{name}/{socialSecurityNumber}")]
public JsonResult GetProduct(string name, int socialSecurityNumber)
{
   var person = new PersonViewModel { Name = name, SocialSecurityNumber = 12345678 };
   return Json(person, JsonRequestBehavior.AllowGet);
}

Razor View

@model Test.PersonViewModel


<div class="row highlight col-md-10 col-md-offset-2" id="SearchPerson">
   <div class="col-md-1">@Html.LabelFor(model => model.Name):</div>
   <div class="col-md-2">@Html.EditorFor(model => model.Name, new { htmlAttributes = new { placeholder = "Enter name" } })</div>
   <div class="col-md-1">@Html.LabelFor(model => model.SocialSecurityNumber):</div>
   <div class="col-md-2">@Html.EditorFor(model => model.SocialSecurityNumber, new { htmlAttributes = new { placeholder = "Enter ssn" } })</div>
   <button type="button" class="btn btn-default" id="btnSearchPerson" </button>
</div>

<script type="text/javascript">

   $(function() {
      $('#btnSearchPerson').on('click', function () {
         var $this = $(this);
         $this.button('loading');

         $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'Person/' + '@Model.Name' + '/' + @Model.SocialSecurityNumber,
            success: function (data) {
                $('#SearchPerson').html(data);
            },
            error: function (xhr, ajaxOption, thorwnError) {
                console.log("Error")
            },
         });
    });
</script>

Ehsan Sajjad · Accepted Answer · 2016-12-29 10:53:09Z

2

The problem here is you are setting the parameter in ajax url from razor server side variable, so after modifying the values in textboxes, they would'nt get updated in the javascript call, as the razor variable will get evaluated at view render time, so you need to read the values just before sending the ajax call via jquery.

you need to change following :

url: 'Person/' + '@Model.Name' + '/' + @Model.SocialSecurityNumber,

to:

url: 'Person/' + $("#Name").val() + '/' + $("#SocialSecurityNumber").val(),

The 0 was getting posted because for int the default value in 0, so it got posted but for string nothing was posted in the url.

edited Dec 29, 2016 at 10:53

answered Dec 29, 2016 at 10:08

Ehsan Sajjad

62.6k16 gold badges113 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Henrik Over a year ago

I still get error but another one, url is: localhost:51446/Person/ Error: SyntaxError: Unexpected token < in JSON at position 0

Ehsan Sajjad Over a year ago

is your ajax call reaching controller action now?

Ehsan Sajjad Over a year ago

the above line should work, make sure you don't have any other syntax errors in your code

Henrik Over a year ago

I´ve already checked. Since it works with hardcoded url it seems to be something else, the value of val() returns "" :/

Ehsan Sajjad Over a year ago

try setting id of editors yourself and use that in jquery selector like : @Html.EditorFor(model => model.Name, new { htmlAttributes = new { placeholder = "Enter name" id="txtBoxName" } }) and in ajax call $("#txtBoxName").val() as you have labels as well, so might be they are conflicting

|

Collectives™ on Stack Overflow

jquery ajax GET pass properties from razor view model

PersonViewModel

PersonController

Razor View

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

PersonViewModel

PersonController

Razor View

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related