Question

I have this table in my view

<table class="tbl" id="tbl">
        <thead>
            <tr>
                <th>
                    Region
                </th>
                <th>
                    Owner
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null)
            {
                foreach (var item in Model.Regions)
                {
                <tr>
                    <td>
                        @Html.DisplayTextFor(i => item.Name)
                    </td>
                    <td>
                        @Html.DropDownListFor(i => item.Users, new SelectList(item.Users, "Id", "Name"))
                    </td>
                </tr>
            }
            }
        </tbody>

and I have this json code to read it

//This function is used for sending data(JSON Data) to SalesController
function TestFieldSave() {
    // Step 1: Read View Data and Create JSON Object

    var processModel = { "Name": "", "Description": "", "Code": "", "Regions": []};

    var regionModel = { "Name": "", "Users": []};

    var userModel = { "Id": "", "Name": ""};

    var oTable = $('.tbl').dataTable().fnGetData();

    for (var i = 0; i < oTable.length; i++) {

        regionModel.Name  = oTable[i][0];
        userModel.Id      = oTable[i][1];

        regionModel.Users.push(userModel);

        processModel.Regions.push(regionModel);

        userModel = { "Id": "", "Name": ""};

        regionModel = { "Name": "", "Users": []};
   }
    // Step 1: Ends Here

    // Set 2: Ajax Post
    // Here i have used ajax post for saving/updating information
    $.ajax({
        url: '/Process/Create',
        data: JSON.stringify(processModel),
        type: 'POST',
        contentType: 'application/json;',
        dataType: 'json',
        success: function (result) {

            if (result.Success == "1") {
                window.location.href = "/Process/Index";
            }
            else {
                alert(result.ex);
            }
        }
    });
}

And these are my models

namespace TestingTool.ViewModels
{
    public partial class ProcessModel
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string Code { get; set; }

        public virtual ICollection<RegionModel> Regions { get; set; }
    }
}

namespace TestingTool.ViewModels
{
    public class RegionModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public virtual ICollection<UserModel> Users { get; set; }

    }
}

namespace TestingTool.ViewModels
{
    public class UserModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

I can’t read from the DropDownListFor. How do I go about that?

Answer 1

I’ve done something similar using knockout js. Very easy to use and quick to learn. have a look at this demo:

http://knockoutjs.com/examples/contactsEditor.html