Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: MVC3
Hi All,
 
I'm developing site using html5 and kendo ui in asp.net with MVC3 i have got a problem that how to send value when combobox selected value should pass to model and the data from Database should bind to the grid in the view
 
here is the code in the view
@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
 
    <div id="options">*@
    <h3>
        Employee Name
    </h3>
    <input id="comboBox1" />
    
    <h3>
        Employee Details using remote
    </h3>
    <div id="empgrid">
    
    
</div>
<style scoped>
    #example h2
    {
        font-weight: normal;
    }
    #tshirt-view
    {
        border-radius: 10px 10px 10px 10px;
        border-style: solid;
        border-width: 1px;
        overflow: hidden;
        width: 500px;
        margin: 30px auto;
        padding: 20px 20px 0 20px;
    }
    #tshirt
    {
        float: left;
        margin: 30px 40px 30px 20px;
    }
    #options
    {
        padding: 30px;
    }
    #options h3
    {
        font-size: 1em;
        font-weight: bold;
        margin: 25px 0 8px 0;
    }
    #get
    {
        margin-top: 25px;
    }
    
    .k-readonly
    {
        color: gray;
    }
</style>
    
<script type="text/javascript">
 
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: "/Home/GetData",
            update: {
                url: "/Products/Update",
                type: "POST"
            },
            destroy: {
                url: "/Products/Destroy",
                type: "POST"
            },
            create: {
                url: "/Products/Create",
                type: "POST"
            }
        },
 
        schema: {
            model: {
                id: "eid",
                fields: {
                    eid: {
                        //this field will not be editable (default value is true)
                        editable: false,
                        // a defaultValue will not be assigned (default value is false)
                        nullable: true
                    },
                    ename: {
                        validation: { //set validation rules
                            required: true
                        }
                    },
                    age: {
                        //data type of the field {Number|String|Boolean} default is String
                        type: "number",
                        validation: {
                            required: true,
                            min: 25
                        }
                    },
                    salary: {
                        type: "long",
                        validation: {
                            min: 5000
                        }
                    }
                }
            }
        },
        // determines if changes will be send to the server individually or as batch
        batch: true
        //...
    });
 
    $(document).ready(function () {
 
        $("#comboBox1").kendoComboBox({
            index: 0,
            dataTextField: "ename",
            dataValueField: "eid",
            filter: "contains",
            dataSource: {
                type: "json",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 5,
                transport: {
                    read: "Home/GetData"
                }
            }
        });
 
        $("#empgrid").kendoGrid({
            pageable: true,
            toolbar: ["create", "save", "cancel"],
            editable: true,
            dataSource: dataSource,
            columns: [
 
                      { title: 'Employee Id', field: 'eid', width: '35%', sortable: true },
                      { title: 'Employee Name', field: 'ename', width: '45%', flex: 1, sortable: true },
                      { title: 'Age', field: 'age', width: '25%', flex: 1, sortable: true },
                      { title: 'Salary', field: 'salary', width: '45%', flex: 1, sortable: true }
 
                      ],
            sortable: true
        });
 

 
        
            $("#get").click(function () {
                var customDataListId = $("#comboBox1").data("kendoComboBox");
                $.getJSON('<%= Url.Action("PutData", "Grid")%>', { eid: ""+customDataListId.text()+"" }, function (result) {
                    var customDataList = $('#empgrid');
                    customDataList.empty();
                    customDataList.append(result.PutData);
                });
                alert(customDataListId.text());
            });
  });
 

</script>
 
 
In the Controller the following code
 
public ActionResult Index()
        {
            var products = new Movie().GetData();
 
            ViewData["products"] = products;
 
            return View();
 
        }
 
        [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult GetData()
        {
            var emp = new Movie().GetData();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
 
        [HttpPost]
        public ActionResult PutData(string ename)
        {
            var emp = new Movie().PutData(ename);
            return Json(emp, JsonRequestBehavior.AllowGet);
        }
 
 

In the Model the following code
 
DataTable Datatable = new DataTable();
        DataSet Dataset = new DataSet();
 
        public List<EmpPro> PutData(string ename)
        {
            string str = "Data Source=HARAVEER-PC\\SQLEXPRESS;Initial Catalog=Examples;Integrated Security=true";
            SqlConnection connection = new SqlConnection(str);
            SqlCommand command = connection.CreateCommand();
            command.CommandText = "select * from Emp where eid="+ename;
            SqlDataAdapter sda = new SqlDataAdapter();
            sda.SelectCommand = command;
            DataSet ds = new DataSet();
            try
            {
                connection.Open();
                sda.Fill(ds);
 
                List<EmpPro> objlist = new List<EmpPro>();
 
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    EmpPro objemp = new EmpPro();
                    objemp.eid = Convert.ToInt32(ds.Tables[0].Rows[i]["eid"]);
                    objemp.ename = ds.Tables[0].Rows[i]["ename"].ToString();
                    objemp.age = Convert.ToInt32(ds.Tables[0].Rows[i]["age"]);
                    objemp.salary = Convert.ToInt64(ds.Tables[0].Rows[i]["salary"]);
                    objlist.Add(objemp);
                }
 
                //return ds.Tables[0];
                return objlist;
            }
            catch
            {
                return null;
            }
            finally
            {
                if (connection.State != ConnectionState.Closed)
                    connection.Close();
            }
        }
 
        public List<EmpPro> GetData()
        {
            //string str = "Data Source=(local);Initial Catalog=Student;Persist Security Info=True;Integrated Security=SSPI";
            string str = "Data Source=HARAVEER-PC\\SQLEXPRESS;Initial Catalog=Examples;Integrated Security=true";
            SqlConnection connection = new SqlConnection(str);
            SqlCommand command = connection.CreateCommand();
            command.CommandText = "select * from Emp";
            SqlDataAdapter sda = new SqlDataAdapter();
            sda.SelectCommand = command;
            DataSet ds = new DataSet();
            try
            {
                connection.Open();
                sda.Fill(ds);
 
                List<EmpPro> objlist = new List<EmpPro>();
 
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    EmpPro objemp = new EmpPro();
                    objemp.eid = Convert.ToInt32(ds.Tables[0].Rows[i]["eid"]);
                    objemp.ename = ds.Tables[0].Rows[i]["ename"].ToString();
                    objemp.age = Convert.ToInt32(ds.Tables[0].Rows[i]["age"]);
                    objemp.salary = Convert.ToInt64(ds.Tables[0].Rows[i]["salary"]);
                    objlist.Add(objemp);
                }
 
                    //return ds.Tables[0];
                return objlist;
            }
            catch
            {
                return null;
            }
            finally
            {
                if (connection.State != ConnectionState.Closed)
                    connection.Close();
            }
        }
    }
 
    public class EmpPro
    {
        public int eid { get; set; }
        public string ename{get;set;}
        public int age{set;get;}
        public long salary { set; get; }
    }
 
please can anyone help me out
 
thanks and regards
Posted 19-Nov-12 19:04pm
Edited 19-Nov-12 19:43pm
v3

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Dinesh
 
if both your operations require to deal with different sets of data then you should consider having a separate partial view for displaying data. That way you will have a main view which will be bound to the input model and also have a partial view that will be included in main view. The partial view will bind to the model class that will be used to display data (output).
 
Regards
Pawan
  Permalink  
Comments
parsanamoni at 23-Nov-12 6:23am
   
Hi,
here i can able to pass selected combo values to control as well as model and again retrieving row information up to controller But the problem is values are not binding in grid(view).so let me know whats the code i have to write for binding values to grid (i mean datasource and url)....please provide .cshtml code.
 
thanks,
parsanamoni.
Dinesh1207 at 27-Nov-12 6:30am
   
Hi Pawan,

Can you provide me any sample code regarding the problem.

Thanks and Regards
Dinesh

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 6,569
1 Sergey Alexandrovich Kryukov 6,168
2 DamithSL 5,228
3 Manas Bhardwaj 4,717
4 Maciej Los 4,150


Advertise | Privacy | Mobile
Web01 | 2.8.1411022.1 | Last Updated 20 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100