How To

28 Mar 20186 minutes to read

Get the selected values on post back.

Single selection

Enable the property PersistSelection in order to use selection in ListView. Then use the getActiveItemText method take the selected active text through javascript and then pass it to the controller via AJAX.

HTML

@Html.EJ().ListView("localListView").Width(400).DataSource((IEnumerable<CarsList>)ViewBag.datasource).FieldSettings(sf => sf.Text("text")).PersistSelection(true)

  @Html.EJ().Button("button").ShowRoundedCorner(true).Text("Submit").ClientSideEvents(e => e.Click("click"))
 
 
<script> 
function click(args) { 
  var text = $("#localListView").ejListView("getActiveItemText");      
      $.ajax({ 
                type: "POST", 
                data: { value: text },
                url: "/ListView/Features", 
                success: function (result) {  
                    alert(result); 
                } 
            }); 
 
        }    
    
          
       </script>

C#

[HttpPost] 
        public ActionResult Features(string value)
        { 
            string val = value; 
            return Json(val, JsonRequestBehavior.AllowGet); 
        }

Multiple selection

Multiple items can be selected by using EnableCheckMark property. Hence we need to use the getCheckedItemsText method to take all the checked items and then pass it to the controller using javascript AJAX.

HTML

@Html.EJ().ListView("localListView").Width(400).DataSource((IEnumerable<CarsList>)ViewBag.datasource).EnableCheckMark(true).FieldSettings(sf => sf.Text("text"))

@Html.EJ().Button("button").ShowRoundedCorner(true).Text("Submit").ClientSideEvents(e => e.Click("click"))
 
<script> 
 
        function click1(args) { 
              var text = $("#localListView").ejListView("getCheckedItemsText"); 
            $.ajax({ 
                type: "POST", 
                 data: { value: text },
                url: "/ListView/Features", 
                success: function (result) {  
                    alert(result); 
                } 
            }); 
 
        } 
 
    </script>

C#

[HttpPost]
         public ActionResult Features(object value)  
         {
             object val = value;
             return Json(val, JsonRequestBehavior.AllowGet);
         }

Render ListView from Code behind

ListView can be rendered from the code behind by initializing the required properties in controller and passing those properties via ViewData or Model to the client side

The following code illustrates the initialization of ListView properties in the controller.

C#

//Namespace to get the JavaScript (ListView) component properties
using Syncfusion.JavaScript.Models;

namespace MvcApplication.Controllers
{
    public class ListViewController: Controller
    {

        public ActionResult ListviewFeatures()
        {

              //Initializing the Listbox model

          ListViewProperties ListviewObj = new ListViewProperties();


            //Initializing the data as items and other properties 

            ListViewProperties ListviewObj = new ListViewProperties();
            ListviewObj.ShowHeader = false;
            ListviewObj.Width = 200;
            List<ListViewItem> obj = new List<ListViewItem>();
            obj.Add(new ListViewItem() { Text = "Home" });
            obj.Add(new ListViewItem() { Text = "Profile" });
            obj.Add(new ListViewItem() { Text = "Photos" });
            obj.Add(new ListViewItem() { Text = "Location" });

            ListviewObj.Items = obj;
            ListviewObj.EnableCheckMark = true;

            //Passing Listview properties using the ViewData

            ViewData["ListModel"] = ListObj;

            return View();
        }
    }
}

Binding the ListView properties passed via ViewData from the controller in the client side as below.

CSHTML

@{
    Html.EJ().ListView("Listview", (Syncfusion.JavaScript.Models.ListViewProperties)ViewData["ListViewModel"]).Render();
}