Bind WebGrid using Partial View in ASP.Net MVC

mukesh1

SOLVED CLOSED ACTIVE ANSWERED
User: mukesh1
Posted: on Aug 07, 2018 01:47 AM
Forum: ASP.Net MVC
Answer: 2
Views: 9336
Sample Code: Download

Webgrid not binding in mvc

i m binding this gridview with partial view on other page, it's showing undefined there, but if i use only view then it's working fine.

public ActionResult FindSearch(int partner, int minimum_age, int maximum_age, int relegion)
{
    string dob1 = dobyear1 + "-" + month + "-" + day;
    DateTime dob21 = Convert.ToDateTime(dob1);
    var dobyear2 = year - max;

    string dob2 = dobyear2 + "-" + month + "-" + 1;
    DateTime dob22 = Convert.ToDateTime(dob2);
    List<User> userlist = new List<User>();
    userlist = db.Users.Where(s => s.Gender == "2" && s.DOB <= dob21 && s.DOB >= dob22).ToList();

    return PartialView(userlist);
}

$.ajax({
    url: '@Url.Action("FindSearch", "Home")',
    dataType: "html",
    data: { "partner": Partner, "minimum_age": Minimum_Age, "maximum_age": Maximum_Age, "relegion": Relegion },
    type: "GET",
    contentType: "application/json",
    success: function (response) {

        $('.divpartial').html(response);
    }
    ,
    error: function (err) {
        alert(err.responseText);
        alert("error");
    }
});

@model IEnumerable<Wedding_Plan.Models.User>

@{
    WebGrid grid = new WebGrid(Model, canPage: true);
}
@if (Model.Count() > 0)
{
    @grid.GetHtml(tableStyle: "table-design table table-bordered table-hover dataTable", fillEmptyRows: false,
                columns: new[]
                {
                    grid.Column(columnName:"First_Name", header:"Name"),
                    grid.Column(columnName:"User_id", header:"Id"),
                })
}

iT's showing value and automatically reload that page and value gone quickly.

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on Aug 07, 2018 02:00 AM
Modified: on Aug 07, 2018 05:35 AM
Report

Hi mukesh1,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of NorthWind database that you can download using the link given below.

Download Northwind Database

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    NorthwindEntities db = new NorthwindEntities();
    public ActionResult FindSearch(int partner, int minimum_age, int maximum_age, int relegion)
    {
        List<Employee> userlist = db.Employees.Where(s => s.Country == "USA").ToList();
        return PartialView("_EmployeeDetails", userlist);
    }
}

Index View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <div align="center">
        <input type="button" value="Details" id="btnDetails" class="btn btn-primary" />
        <br />
        <br />
        <div id="dvPartialView" class="divpartial"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[id*=btnDetails]').on('click', function () {
                var Partner = 1;
                var Minimum_Age = 1;
                var Maximum_Age = 1;
                var Relegion = 1;
                $.ajax({
                    url: '@Url.Action("FindSearch", "Home")',
                    dataType: "html",
                    data: { "partner": Partner, "minimum_age": Minimum_Age, "maximum_age": Maximum_Age, "relegion": Relegion },
                    type: "GET",
                    contentType: "application/json",
                    success: function (response) {
                        $('.divpartial').html(response);
                    },
                    error: function (err) {
                        alert(err.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>

EmployeeDetails Partial View

@model IEnumerable<_WebGrid_PartialView.Employee>

@{
    WebGrid grid = new WebGrid(Model, canPage: true);
}

@if (Model.Count() > 0)
{
    @grid.GetHtml(tableStyle: "table-design table table-bordered table-hover dataTable", fillEmptyRows: false,
        columns: new[]
        {
            grid.Column(columnName:"FirstName", header:"Name"),
            grid.Column(columnName:"EmployeeID", header:"Id"),
            grid.Column(columnName:"Country", header:"Country")
        })
}

Screenshot

dharmend...

0 8

Reply
ANSWER
User: dharmendr
Replied: on Aug 08, 2018 05:40 AM
Report

Hi mukesh1,

Check the below example.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    NorthwindEntities db = new NorthwindEntities();
    public ActionResult FindSearch(int partner, string minimum_age, string maximum_age, int relegion)
    {
        List<Employee> userlist = db.Employees.Where(s => s.Country == minimum_age && s.City == maximum_age).ToList();
        return PartialView("_EmployeeDetails", userlist);
    }
}

Index View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <div align="center">
        @Html.DropDownList("Minimum_Age", new List<SelectListItem>()
                            {
                                new SelectListItem(){ Text= "USA", Value = "USA"},
                                new SelectListItem(){ Text= "UK", Value = "UK" }
                            }, new { @class = "form-control" })

        @Html.DropDownList("Maximum_Age", new List<SelectListItem>()
                            {
                            new SelectListItem(){ Text= "Seattle", Value = "Seattle"},
                                new SelectListItem(){ Text= "Tacoma", Value = "Tacoma" },
                                new SelectListItem(){ Text= "Kirkland", Value = "Kirkland" },
                                new SelectListItem(){ Text= "Redmond", Value = "Redmond"},
                                new SelectListItem(){ Text= "London", Value = "London"}
                            }, new { @class = "form-control" })
        <br />
        <br />
        <div id="dvPartialView" class="divpartial"></div>
        <input type="submit" value="Details" id="btnDetails" class="btn btn-primary" onclick="javascript:Callpartialview()" />
    </div>
    <script type="text/javascript">
        function Callpartialview() {
            var Minimum_Age = document.getElementById("Minimum_Age").value;
            var Maximum_Age = document.getElementById("Maximum_Age").value;
            var Partner = 1;
            var Relegion = 1;
            $.ajax({
                url: '@Url.Action("FindSearch", "Home")',
                dataType: "html",
                data: { "partner": Partner, "minimum_age": Minimum_Age, "maximum_age": Maximum_Age, "relegion": Relegion },
                type: "GET",
                contentType: "application/json",
                success: function (response) {
                    $('.divpartial').html(response);
                },
                error: function (err) {
                    alert(err.responseText);
                }
            });
        }
    </script>
</body>
</html>

EmployeeDetails Partial View

@model IEnumerable<_160787_WebGrid_PartialView.Employee>

@{
    WebGrid grid = new WebGrid(Model, canPage: true);
}

@if (Model.Count() > 0)
{
    @grid.GetHtml(tableStyle: "table-design table table-bordered table-hover dataTable", fillEmptyRows: false,
        columns: new[]
        {
            grid.Column(columnName:"FirstName", header:"Name"),
            grid.Column(columnName:"EmployeeID", header:"Id"),
            grid.Column(columnName:"Country", header:"Country")
        })
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Bind WebGrid using Partial View in ASP.Net MVC

Company

Explore

Follow us

Contact Us