pass list data to controller

[hpf porsesh]

Hi 

I Try send data to controller by submit form 

I have a form and try send  DataGrid filed by form 

for example 

___________________________________

<form action="/panel/showArchiveLetter" method="post" enctype="multipart/form-data">

<input type="text" name="name"/>

<input type="text" name="age"/>

<ejs-grid id="List_att_files" dataSource="@ViewBag.list_att" toolbar="@(new List<string>() { "Delete" })">

                    <e-grid-editSettings  allowDeleting="true"  mode="Normal"></e-grid-editSettings>

                   

                    <e-grid-columns>

                        <e-grid-column field="attId" headerText="attId" ></e-grid-column>

                        <e-grid-column field="att_file" headerText="att_file" template='#template'  ></e-grid-column>

                    </e-grid-columns>

                </ejs-grid>

  <button type="submit" > Save</button>

</form>

<script id="template" type="text/x-template">

    <a rel='nofollow' href="/AttFiles/Letter/${att_file}">${att_file}</a>

</script>

___________________________________

I want get 'name','age' and List ' attId ',' att_file ' in controller

[Balaji Sekar]

Hi Customer, 

 

We have validated your query and provided the information, and in the form of a DataGrid we have achieved your requirement. In the example below the code, we get the values of the input components with the currentViewData of Grid in the submit button click action and convert these values to stringify format, then assign to the hidden input element(hdnexcelexport). Now in the server side you can get these information. For more information please refer to the example below. 

 

[index.cshtml] 

 

<form action="/Home/ExcelExport" method="post"> 

        <span>Name: </span><input type="text" name="name" /><br/> 

 

        <span>Age: </span><input type="text" name="age" /><br /> 

        <span><b>Grid</b></span> 

        <div> 

            <ejs-grid id="Grid" dataSource="@ViewBag.dataSource" toolbarClick="toolbarClick" allowPaging="true" > 

                <e-grid-columns> 

                    <e-grid-column field="OrderID" headerText="Order ID"></e-grid-column> 

                    <e-grid-column field="CustomerID" headerText="Customer Name" template="#template" ></e-grid-column> 

                     

                </e-grid-columns> 

            </ejs-grid> 

        </div> 

        <button onclick="submitFormFn()" type="button">Submit</button> 

 

        <input type="hidden" name="GridModel" id="hdnexcelexport" /> 

 

    </form> 

    <script id="template" type="text/x-template"> 

        <a rel='nofollow' href="/AttFiles/Letter/${CustomerID}">${CustomerID}</a> 

    </script> 

 

<script> 

    function submitFormFn(e) {         

        var gridObj = document.getElementById("Grid").ej2_instances[0]; 

        var gridData = gridObj.currentViewData; 

        var form = document.getElementsByTagName("form")[0]; 

        gridData.push({ Name: form[0].value }) 

        gridData.push({ Age: form[1].value }) 

        var JsonStr = JSON.stringify({ form: gridData }) 

        document.getElementById("hdnexcelexport").value = JsonStr;  // Assigned the input values in string format       

        form.submit(); 

    } 

 

</script> 

 

[Server] 

  public ActionResult ExcelExport(string GridModel) 

        { 

            // Write your code here 

        } 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar