Issue while sharing the same model with multiple partial views

Question

I am facing an issue while sharing the same model between a view and its multiple partial views.

I have a main view MainView which has its own model MainViewModel. In this MainView, I have a few controls which are bound to properties in the MainViewModel.

On a button click I am opening a partial view from this MainView. Say SubView1. It is a partial view and it consists of several controls which are bound to the properties in MainViewModel. At some point user enters some values in this partial view SubView1 and clicks on a button to submit the data. During this time, I am posting the data to the controller like this :

$.ajax({
    type: "POST",
    url: "/MainViewController/SomeAction",
    data: JSON.stringify({ dataObj: dataArray }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    success: function (msg) {
        ServiceSucceeded(msg);
    },
    error: function () {
        return "error";
    }
});

SomeAction Code :

public void SomeAction(List<ModelClass> dataObj)
{
    if(dataObj != null)
    {

    }
}

My doubt is that, since the controls in this partial view are already bound to the MainViewModel properties, do I still need to pass it using json like this? Or can the data be directly accessed from the MainViewModel during a post method? I tried to pass the model to the post method, but its data remains as null.

My MainViewModel class :

private EnvironmentVariableTarget m_Markers;
private List<SelectListItem> startLocation = new List<SelectListItem>();
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string JobId { get; set; }
public string TaskId { get; set; }
public string TrajName { get; set; }
public int UserId { get; set; }
public DateTime StartPeriod { get; set; }
public DateTime EndPeriod { get; set; }
public int Aggr { get; set; }
public string MailId { get; set; }
public string StartLocation { get; set; }
public string EndLocation { get; set; }
public string lblGridHeaderTask { get; set; }
public string lblGridHeaderTraj { get; set; }
public string lblGridAggr { get; set; }
public string lblGridStartDate { get; set; }
public string lblGridEndDate { get; set; }
public int StartLocId { get; set; }
public int EndLocaId { get; set; }
public MySqlConnection databaseConnectionObj;
private MySqlCommand sqlCommandObj;
private Logger m_Logger;

These are the bound properties which I need :

public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string TrajName { get; set; }

When user clicks on add to list, I am adding to javascript array like this :

var obj = { TaskId: ccount, TrajName: $('#drpTraj').find(":selected").text(), StartTime: $('#txtStartTime').val(), EndTime: $('#txtEndTime').val(), Aggr: $('#drpAggrInterval').find(":selected").text() }
dataArray.push(obj)

I am keeping this array in js and when user clicks submit I am passing the entire array back to the controller. My question is at this point, I am getting the control's value. I am asking whether I can get the bound value at this time. ie the controls drpTraj, txtStartTime and drpAggrInterval are already bound to viewmodel properties.

My questions are :

1. Is there any other way to tackle this scenario?
2. If I want to pass one more data which is not bound to the viewmodel, then how to pass that?
3. If databinding is not used, then is this the way to pass data ie using JSON?

Answer 1

Check Below Code for passing model data through JSON :

//Your Master Model Properties 
    public partial class YourMasterModel
        {
             public List<YourModel> YourMasterModelList{ get; set;  }
             public YourModel YourModel{ get; set; }
         }    

   //Your Model Properties 
    public partial class YourModel
        {
            public int Id { get; set; }
            public string Param1 { get; set; }
            public string Param2 { get; set; }
            public int[] SelectedListOptions { get; set; }
        }

    //Your Ajax Call along with Your Model
    $("#Addbtn").click(function () {
    var YourModel = {
                    "Id": $("#hdnId").val(),
                    "Param1": $("#Param1").val(),
                    "Param2": $("#Param2").val()

                };

 var YourMasterModel = {

                    "YourMasterModelList": //You have to create a list of YourModel through for loop and stored into a list variable and pass this to here
                    "YourModel": YourModel
                };
                $.ajax(
                 {
                     url: '/MainViewController/SomeAction/',
                     type: "Post",
                     async: false,
                     dataType: "html",
                     data: JSON.stringify(YourMasterModel),
                     contentType: "application/json;charset=utf-8",
                     success: function (result) {
                         $("#YourResultDiv").html("");
                     }
                 });
       });

    //Your Action with your model 

            /// <summary>
            /// Add Data
            /// </summary>
            /// <param name="YourModel"></param>
            /// <returns></returns>
            [HttpPost]
            public ActionResult AddDataWithModel(YourMasterModel objYourMasterModel)
            {
            //Here you will get the list of yourmodel data
            var listofdata=objYourMasterModel.YourMasterModelList;
            return PartialView("_YourPartialView");
            }

Hope this will help you !!

Answer 2

If you want to pass parameter into post method use below technique:

@using (Ajax.BeginForm("action", "controller", null, new AjaxOptions() { OnSuccess = "" }, new { @class = "form-horizontal", role = "form", id = "id" }))
{ 
    //put partial view code into the these brackets 
}

If you want to do ajax, then you need to pass data into data:

// all columnname same name as data model of action 
data: {  
    "columnname1": "John",  
    "columnname2": "Smith",    
    "columnname2": "man",    
    "columnname3": 32
}