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".

Solution

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