MVC Update Model Properties Using JQuery

Question

It's been a while since I did any MVC/JQuery. I'm looking for a solution or a better way of achieving this.

To simplify things, I have a Model with the following properties:

public IEnumerable<XmlInputFieldModel> XmlFields { get; set; }
public IEnumerable<string> BusinessObjectFields { get; set; }
public IEnumerable<XmlSchemaField> MappedFields { get; set; }

public class XmlInputFieldModel
{
    public string XmlElement { get; set;}

    public string XmlValue { get; set; }
}

public class XmlSchemaField
{
    public string XmlElement { get; set; }

    public string BusinessObjectField { get; set; }
}

In my View, I'm providing a list of the XmlField Elements and their Values, and for each XmlField I have a dropdown to select a BusinessObjectField, shown below:

@foreach(var item in Model.XmlFields)
{
    <div>
        <div style="width: 300px; display: inline-block;">
            @Html.DisplayFor(i => item.XmlElement)
        </div>
        <div style="width: 300px; display: inline-block;">
            @Html.DisplayFor(i => item.XmlValue)
        </div>
        <div class="busoblist" data-elementid="@(item.XmlElement)" style="display: inline-block;">
            @Html.DropDownListFor(m => m.BusinessObjectFields, new SelectList(Model.BusinessObjectFields, item.XmlElement))
        </div>
        <hr />
    </div>
}

<div style="width: 200px; display: inline-block;">
    <input type="button" name="Save" id="Save" />
</div>

What I want to happen when I click Save is to populate my MappedFields property with the values from the given Element and the chosen dropdown Field value. I've attempted this through the script below, but I can't work out how to get from the Key/Value array into my Model.

<script type="text/javascript">
    $(document).ready(function () {
        $("#Save").on("click", function () {

            var mappedFields = new Array();
            $('.busoblist').each(function() {
                var element = $(this).attr('data-elementid');
                mappedFields.push(element + ' : ' + $("option:selected", this).text() + ',');
            });

            var dataToSend = { Val: "Working" };

            $.ajax({
                url: "Home/SetMappedFields",
                type: "POST",
                data: dataToSend,
                error: function(error) {
                    alert("Error: " + error.statusText);
                },
                success: function(result) {
                    alert("Result: " + result.statusText);
                }
            });
        });
    });
</script>

[HttpPost]
public ActionResult SetMappedFields(string Val)
{
    string newVal = Val;
    return this.RedirectToAction(x => x.Index());
}

I explored the Ajax route (commented code), but can't seem to get this to find the controller action. The above view and script sits in a partial view, where other properties of the base Model are populated.

@CSharper - I've updated the code above, and it's still not hitting the controller :( (I'm using the default HomeController from a starting MVC4 application). My Error function on the script returns "Error: Not Found".

CSharper · Accepted Answer · 2014-02-25 17:05:47Z

3

Ajax isn't finding the controller because your not defining Ajax data: and giving it the correct parameters. So which in turn

url: "Home/SetMappedFields" + "?model=" + model + "&fields=" + mappedFields, is not right. If you wanted to call that method from the address bar or using window.open() that would work but ajax expects the parameters differently

(Inside the event that you want to fire the Ajax call.)

var dataToSend = {
        Val : "Working"
    };

    $.ajax({
        url: "/Home/AjaxCall",
        type: "POST",
        data: dataToSend,
        success: function (result) {

        },
    });
})

    [HttpPost]
    public ActionResult AjaxCall(string Val)
    {
        return View("Index");
    }


var dataToSend = {
            param1: value,
            param2: value
        };

This is how you can reference multiple parameters

edited Feb 25, 2014 at 17:05

answered Feb 25, 2014 at 15:47

CSharper

5,6206 gold badges32 silver badges54 bronze badges

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

13 Comments

Mark Over a year ago

Hi @CSharper, I just tried your Ajax call above, and it's still not finding it. [HttpPost] public ActionResult SetMappedFields(XmlSchemaModel model, Array fields)

CSharper Over a year ago

Ok it's because it's expecting an entire model class and an array. Do me a favor and just remove the "complex" parameters, replace it with a simple string, and hardcode the dataToSend param, just so we can see it work.

Mark Over a year ago

I just tried it with a string, and it's still not getting to the controller. Does it work properly in a partial view?

CSharper Over a year ago

It doesn't matter whether it is in a partial view or not. Are you referencing JQuery correctly?

Mark Over a year ago

I've marked your answer, as you have been the most helpful. I have however completely re-written everything to simplify it greatly and use editor templates.

|

Collectives™ on Stack Overflow

MVC Update Model Properties Using JQuery

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related