ASP.NET MVC value of a input tag into a sql query

Question

I would like to filter my table using a input tag, something like: "SELECT * FROM tblaccount WHERE accountNo = 'document.getElementById('txtSearch').value'"

This is my AccountsViewModel

namespace MyProject.Models
{
public class AccountsViewModel
{
    public DataTable Accounts { get; set; }
}
}

SelectModel.cs

namespace MyProject.Models
{
public class SelectModel
{
    private static SqlConnection GetCn()
    {
        SqlConnection cn = new SqlConnection(@"MyConnectionString");
        return cn;
    }

    public DataSet GetAccounts()
    {
        SqlConnection cn = GetCn();
        SqlCommand cmd = new SqlCommand("SELECT * FROM tblaccount ORDER BY accountNo ASC", cn);
        DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        da.Fill(ds);
        return ds;
    }
}
}

HomeController.cs

namespace MyProject.Controllers
{
public class HomeController : Controller
{
    public ActionResult Index(MyProject.Models.SelectModel selectmodel)
    {
        AccountViewModel vm = new AccountViewModel();
        DataSet ds = selectmodel.GetAccounts();
        vm.Accounts = ds.Tables[0];

        return View(vm);
    }
}
}

Index.chtml

@model MyProject.Models.AccountsViewModel

<label for="txtSearch">Search: </label>        
<input type="text" class="form-control" id="txtSearch">
<button class="btn btn-default" type="submit" id="btnSearch">Search</button>

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th">Account Number</th>
            <th">Transaction Date</th>
        </tr>
    </thead>
    <tbody>
        @foreach (System.Data.DataRow dr in Model.Accounts.Rows)
        {
    <tr>
        <td>@dr["Id"].ToString()</td>
        <td>@dr["accountNo"].ToString()</td>
        <td>@dr["dateTrans"].ToString()</td>
    </tr>}
    </tbody>
</table>

Answer 1

Mainly we have two ways to get this output

Way 1: using form tag - Simplest

As a first step , put the search box inside the form tag and provide the name for the textbox as below :

 @model MyProject.Models.AccountsViewModel

    @using (Html.BeginForm("Index", "Home", FormMethod.Get))
    {    

        <label for="txtSearch">Search: </label>        
    <input type="text" class="form-control" id="txtSearch"  name="txtSearchterm">

    }

    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th">Account Number</th>
                <th">Transaction Date</th>
            </tr>
        </thead>
        <tbody>
            @foreach (System.Data.DataRow dr in Model.Accounts.Rows)
            {
        <tr>
            <td>@dr["Id"].ToString()</td>
            <td>@dr["accountNo"].ToString()</td>
            <td>@dr["dateTrans"].ToString()</td>
        </tr>}
        </tbody>
    </table>

Controller Code:

public ActionResult Index(MyProject.Models.SelectModel selectmodel,string txtSearchterm)  //when you click submit button here you will get the value 
    {
             AccountViewModel vm = new AccountViewModel();
    //updated
    DataSet ds = selectmodel.GetAccounts(txtSearchterm);
    vm.Accounts = ds.Tables[0];

    return View(vm);

}

Select Model.cs:

 namespace MyProject.Models
    {
    public class SelectModel
    {
        private static SqlConnection GetCn()
        {
            SqlConnection cn = new SqlConnection(@"MyConnectionString");
            return cn;
        }

         //updated
        public DataSet GetAccounts(string txtSearchterm)
        {
            SqlConnection cn = GetCn();
       string sqlquery = "";
            if(txtsearchterm != null)
      {
       sqlquery ="SELECT * FROM tblaccount WHERE accountNo = 
       '"+txtSearchterm+"'ORDER BY accountNo ASC""
       }
    else
   {
     sqlquery ="SELECT * FROM tblaccount ORDER BY accountNo ASC""
   }
            SqlCommand cmd = new SqlCommand(sqlquery , cn);
            DataSet ds = new DataSet();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(ds);
            return ds;
        }
    }
    }

Msdn: Add a Search Box to the Students Index Page

Way 2 : Using jquery

Since there are many good articles available for that I don't want to repeat again. Here is the link for those article.

Filtering Data in ASP.NET MVC using jQuery and Partial Views

http://www.codedigest.com/posts/24/search-or-filter-table-columns-in-client-side-using-jquery-in-aspnet-mvc

Hope the above information will be useful

Thanks

Karthik

Answer 2

You need a new property in SelectModel class. And use it go filter the data as you want.

SelectModel.cs

namespace MyProject.Models
{
    public class SelectModel
    {
        private static SqlConnection GetCn()
        {
             SqlConnection cn = new SqlConnection(@"MyConnectionString");
             return cn;
        }

        public string SearchText { get; set; }

        public DataSet GetAccounts()
        {
            SqlConnection cn = GetCn();
            SqlCommand cmd;
            if (!string.IsNullOrEmpty(this.SearchText))
            {
                 var sqlQuery = "SELECT * FROM tblaccount WHERE accountNo = @accountNo ORDER BY accountNo ASC";
                 cmd = new SqlCommand(sqlQuery, cn);
                 cmd.Parameters.Add(new SqlParameter("accountNo", SqlDbType.NVarChar);
                 cmd.Parameters[0].Value = this.SearchText;
            }
            else
            {
                cmd = new SqlCommand("SELECT * FROM tblaccount ORDER BY accountNo ASC", cn);
            }
            DataSet ds = new DataSet();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(ds);
            return ds;
        }
    }
}

Now you need to change html of view so that the SearchData will come from UI to the controller as part of model. Change html of search textbox as following.

<input type="text" class="form-control" id="SearchText" name="SearchText" />

This should help you resolve your issue.