Posting multiple parameters via javascript from view MVC

Question

I want to save any changes made in the textbox field instantaneously to my database, I have the javascript to pass back the changed value to the controller, however I am not aware how pass the unique id with this to save the changed value against.
Below is my view passing the price back to the script, how can I pass the part id with this?

@foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.partid, new { id = "partCode"})
            </td>
            <td>
                @Html.DisplayFor(modelIem => item.partdesc)
            </td>
            <td>
                @Html.TextBoxFor(modelItem => item.price, new { id = "priceTextBox", @class = "mytext rightJustified" })
            </td>
        </tr>
    }

</table>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
    $('#priceTextBox').change(function () {
        var changedText = $(this).val();
        var partsJava = $("#partCode").val();
        
            //Post the content of your Textbox to your "YourAction" action in "YourController"
        $.post('@Url.Action("EnterNewSpecialPrice2", "SpecialPrices")', { "ChangedText": changedText, "PassPartCode": partsJava }, function (data) { });
            });
});
    </script>

connectedsoftware · Accepted Answer · 2015-11-13 10:55:40Z

2

Define a class to hold both pieces of information that matches the Json object you have created in your script:

 public class PartInputModel{

    public string ChangedText {get;set;}
    public string PassPartCode {get;set;}

 }

Note the properties above must match the ones you have defined here:

{ ChangedText: changedText, PassPartCode: partsJava }

Also note you must remove the double quotes around the ChangedText and PassPartCode definition when creating the JSON structure as those are not required.

Change your controller action to receive this object and let the model binding do the work:

    [HttpPost]
    public ActionResult EnterNewSpecialPrice2(PartInputModel inputModel)   {
        // inputModel will have your two pieces of data 

    }

A better mechanism for storing and retrieving the id is to attach it as a data tag to the markup for the Text Box by adding a data-id tag:

 @Html.TextBoxFor(m => item.price, new { id = "", @class = "priceTextBox mytext rightJustified", data_id="item.partid" })

Then change your script to read this:

var partsJava = $(this).data('id');

The advantage of this approach is that it is very easy to pass additional parameters by simply expanding your JSON structure and adding a matching property to the PartInputModel class.

edited Nov 13, 2015 at 10:55

answered Nov 13, 2015 at 10:32

connectedsoftware

7,0973 gold badges33 silver badges45 bronze badges

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

3 Comments

cg91 Over a year ago

Hi thanks @CSL, I have followed your approach and i'm still only receiving the value for the ChangedText, the PassPartCode is still returning null. Am I correctly referencing the partid?

connectedsoftware Over a year ago

@cg91 See my edits above add a data tag to the text box markup and then change the script slightly to read this.

connectedsoftware Over a year ago

@StephenMuecke Hey - I have upvoted you - your answer is good. I would have just pointed the OP in the direction of your answer other than the fact he has already changed the structure to use a class - so it may have been confusing for them to switch back to your approach.

user3559349 · Accepted Answer · 2015-11-13 10:42:08Z

2

You generating invalid html because of duplicate id attributes and selectors such as var partsJava = $("#partCode").val(); will only ever get the value of the first element with id="partCode". In anycase, it would be undefined since DisplayFor() does not generate a element (only text) and it has id attribute or value attribute. Change your loop to

@foreach (var item in Model)
{
    <tr>
        <td>@Html.DisplayFor(m => item.partid)</td>
        <td>@Html.DisplayFor(m => item.partdesc)</td>
        <td>
            @Html.TextBoxFor(m => item.price, new { id = "", @class = "priceTextBox mytext rightJustified", data_id="item.partid" })
        </td>
    </tr>
}

and then modify the script to

$('.priceTextBox').change(function () {
    var changedText = $(this).val();
    var partsJava = $(this).data('id');
    $.post('@Url.Action("EnterNewSpecialPrice2", "SpecialPrices")', { "ChangedText": changedText, "PassPartCode": partsJava }, function (data) { });
    });
});

Note the new { id="" } remove the id attribute so you do not get invalid html.

This of course assumes you have a method

public ActionResult EnterNewSpecialPrice2(string ChangedText, string PassPartCode)

in SpecialPricesController (although PassPartCode may be int?

answered Nov 13, 2015 at 10:42

user3559349

1 Comment

cg91 Over a year ago

Thanks Stephen, I used a combination of both your answers to help me, i'm giving CSL the top answer as he answered first, I have upvoted your reply

Collectives™ on Stack Overflow

Posting multiple parameters via javascript from view MVC

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related