Filter and display record in PartialView using Ajax BeginForm in ASP.Net MVC

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on May 20, 2019 12:40 AM
Forum: ASP.Net MVC
Answer: 1
Views: 7230
Sample Code: Download

I use 2 Textboxs for searching Items in database :

HTML-

<div class="form inline">
    @using (Ajax.BeginForm("Search", "Test", new AjaxOptions { HttpMethod = "Post",
    InsertionMode = InsertionMode.Replace, LoadingElementId = "imgLoading", LoadingElementDuration
    = 1000, Url = "/Test/Search", UpdateTargetId = "divSearch" })) {
    <div class="group">
        @Html.Label("جستجو روی نام", new { @class = "label" })
        <div class="controls">
            @Html.TextBox("txtSearchName", null, new { @class = "text", style = "width: 240px;"
            })
        </div>
    </div>
    <div class="group">
        @Html.Label("جستجو روی آدرس", new { @class = "label" })
        <div class="controls">
            @Html.TextBox("txtSearchAddress", null, new { @class = "text", style = "width: 240px;"
            })
        </div>
    </div>
</div>

and:

Code -

public ActionResult Search(string txtSearchName, string txtSearchAddress)
{
    System.Threading.Thread.Sleep(2000);
    var blReseller = new ResellerRepository();
    var model = blReseller.Where(p => p.Name.Contains(txtSearchName) && p.Address.Contains(txtSearchAddress)).ToList();
    return PartialView("_SearchReseller", model);
}

as you see in above action I use txtSearchName and txtSearchAddress (2 textbox's Id) for searching data in database

now I want define DropdownList that users can select Item from Dropdownlist and click button to search in database below is code:

<div>
    <div class="form inline">
        @using (Ajax.BeginForm("Search", "Test", new AjaxOptions { HttpMethod = "Post",
        InsertionMode = InsertionMode.Replace, LoadingElementId = "imgLoading", LoadingElementDuration
        = 1000, Url = "/Test/Search", UpdateTargetId = "divSearch" })) {
        <div class="group">
            @Html.Label("جستجو روی نام", new { @class = "label" })
            <div class="controls">
                @Html.DropDownListFor(model => model.Ostans, Model.Ostans1, "Please select")
            </div>
        </div>
        <div class="group">
            @Html.Label("جستجو روی آدرس", new { @class = "label" })
            <div class="controls">
                @Html.DropDownListFor(model => model.Citeies1, Model.Citeies1, "Please select")
            </div>
        </div>
        <div class="block-standart">
            <div class="form">
                <div class="group">
                    <div class="controls">
                        <img src="~/Content/Images/loading (1).gif" id="imgLoading" style="display: none" />
                        <button class="button">
                            جستجو</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
} @Html.Partial("_SearchReseller", Model)

now I want in ACTION use DropDownList Selected Item and search in database how I can use it in below action

public ActionResult Search(string txtSearchName, string txtSearchAddress)
{
    System.Threading.Thread.Sleep(2000);
    var blReseller = new ResellerRepository();
    var model = blReseller.Where(p => p.Name.Contains(txtSearchName) && p.Address.Contains(txtSearchAddress)).ToList();
    return PartialView("_SearchReseller", model);
}

best regards

Neda

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

dharmend...

1 2

Reply
ANSWER
User: dharmendr
Replied: on May 20, 2019 04:12 AM
Report

Hi nedash,

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

Model

public class CustomerModel
{
    public string Name { get; set; }
    public string Country { get; set; }
}

Controller

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

    public ActionResult Search(CustomerModel customer)
    {
        System.Threading.Thread.Sleep(1000);
        NorthwindEntities entities = new NorthwindEntities();
        var model = entities.Customers.Where(x => x.ContactName.Contains(customer.Name) && x.Country == customer.Country).ToList();
        return PartialView("_SearchCustomer", model);
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<_Ajax_BeginForm_Search.Models.CustomerModel>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Index</title>
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
</head>
<body>
    <%using (Ajax.BeginForm("Search", "Home", new AjaxOptions
      {
          HttpMethod = "Post",
          InsertionMode = InsertionMode.Replace,
          Url = "/Home/Search",
          UpdateTargetId = "divSearch"
      }))
      {%>
    <table>
        <tr>
            <td>Name</td>
            <td><%:Html.TextBoxFor(model => model.Name)%></td>
        </tr>
        <tr>
            <td>Country</td>
            <td>
                <%:Html.DropDownListFor(model => model.Country, new List<SelectListItem> {
                    new SelectListItem { Text="Austria", Value="Austria" },
                    new SelectListItem { Text="France", Value="France" },
                    new SelectListItem { Text="USA", Value="USA" }
               }, "Select", new { @style = "width: 100%;" })%>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" name="btnsearch" value="Search" />
            </td>
        </tr>
    </table>
    <% } %>
    <div id="divSearch">
    </div>
</body>
</html>

Partial View

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<_Ajax_BeginForm_Search.Customer>>" %>
<table>
    <tr>
        <th>CustomerID</th>
        <th>ContactName</th>
        <th>City</th>
        <th>Country</th>
    </tr>
    <% foreach (var item in Model)
       { %>
    <tr>
        <td><%: item.CustomerID %></td>
        <td><%: item.ContactName %></td>
        <td><%: item.City %></td>
        <td><%: item.Country %></td>
    </tr>
    <% } %>
</table>

Screenshot

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

Filter and display record in PartialView using Ajax BeginForm in ASP.Net MVC

Company

Explore

Follow us

Contact Us