使用 jQuery 从数据库创建表

Question

我对 MVC 模型还很陌生，需要一些帮助来解决这个问题。

PricingList.cshtml 这个页面应该有一个文本框，这样你就可以输入一个状态（例如：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” .这就是我想我想要的。 但是这总是会导致 public ActionResult PricingList(string state) 的“状态”变量为“空”。

任何帮助将不胜感激。

Answer 1

enter code here你是否修改了路由位置以包含 string 而不是 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);
    }

Answer 2

如果你把 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);
}

Answer 3

试试这个

      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);
                }
            });