使用jQuery从数据库创建表

时间:2014-02-10 23:10:46

标签: c# jquery asp.net-mvc

我对MVC模型还不熟悉,需要一些帮助来解决这个问题。

PricingList.cshtml 此页面应该有一个TextBox,因此您可以输入一个状态(例如:AL,OR),一个单击的提交按钮将根据所选的状态呈现一个表。

model IEnumerable<AtrPricing.MVC.Models.CountyListViewModel>

@{
    ViewBag.Title = "Pricing List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}    

    <form>
        Choose State: <input type="text" id="choosestate" name="choosestate" maxlength="2" autofocus placeholder="State"/>
        <button id="submitstate" type="submit">Submit</button>
    </form>
<div>
//div containing my table headers
</div>
<script type="text/javascript">    
 $('#submitstate').submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: { state: $('#choosestate').val() },
                success: function (result) {
                    $('#table-pricingList').html(resutl);
                }
            });

            return false;
        });       
</script>

家庭控制器

public class HomeController : Controller
{
    private VendorRepository repository = new VendorRepository();

    public ActionResult Index()
    {
        return View();
    }
    public ActionResult PricingList(string state)
    {
        if (state == null)
        {
            return View();
        }
        else
        {
            var StateList = repository.GetStateList(state);
            return View(state);
        }
    }    
}

GetStateList() 这是在“VendorRepository.cs”中。这段代码很好用。

public List<CountyListViewModel> GetStateList(string state)
{
    var parameters = new DynamicParameters();
    parameters.Add("@State", value: state);

    var query = @"SELECT counties.id
                    , counties.CountyName
                    , counties.Website
                    , counties.Address
                    , counties.City
                    , counties.State
                    , counties.PhonePrimary
                    , counties.PhoneAlt
                    , counties.RecordsOnline
                    , counties.BackToYear
                    , counties.Cost
                FROM
                    counties
                WHERE
                    counties.state = @State;";

    return this.db.Query<CountyListViewModel>(query,parameters).ToList();
}

CountyViewModel

这包含上一节中的 CountyListViewModel

public class EditCountyViewModel
{
    public County county { get; set; }
    public List<County> CountyList { get; set; }
}

public class CountyListViewModel
{
    public int Id { get; set; }
    public string CountyName { get; set; }
    public string Website { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string PhonePrimary { get; set; }
    public string PhoneAlt { get; set; }
    public int RecordsOnline { get; set; }
    public int BackToYear { get; set; }
    public decimal Cost { get; set; }
}

现在,一旦我用状态填写文本框(例如:'al')并点击提交按钮,我的网址就会从“〜/ Home / PricingList”变为“〜/ Home / PricingList?choosestate = al” 。这就是我想要的。 HOWEVER 这总是导致公共ActionResult PricingList(字符串状态)的'state'变量为'null'。

任何帮助都将不胜感激。

3 个答案:

答案 0 :(得分:0)

enter code here您是否修改了路线位置以包含字符串而不是int(如果不是,您可能想要尝试)

像这样

  public ActionResult PricingList()
    {
        string state;
        if (Request.QueryString["choosestate"] != null)
        {
            state = Request.QueryString["choosestate"].ToString();
        }
        else
        {
            state = "ALL";
        }
        var StateList = repository.GetStateList(state);
        return View(StateList);
    }

答案 1 :(得分:0)

如果你把id =“tableContainer”放到你想要保存表格的div上,你可以做这样的事情。假设您的数据是JSON,请从您的ajax调用中成功调用此函数。

function DisplayTable(counties) {
$("#tableContainer").html("");
var table = $("<table/>");

$(counties).each(function () {
    var tr = $("<tr/>");
    $("<td/>", {
        text: this.CountyName
    }).appendTo(tr);
    $("<td/>", {
        text: this.Website
    }).appendTo(tr);
    tr.appendTo(table);
});
$("#tableContainer").append(table);
}

答案 2 :(得分:0)

试试这个

      public ActionResult PricingList(string state)
    {
        if (String.IsNullOrEmpty(state)
        {
            return View();
        }
        else
        {
            return View(repository.GetStateList(state));
        }
    }

        $.ajax({
                url: this.action,
                type: this.method,
                data: "{'state':'" +  $('#choosestate').val() + "'}"
                success: function (result) {
                    $('#table-pricingList').html(resutl);
                }
            });