提交后显示和隐藏过滤内容 table(jQuery)

Question

场景 1 我有一个视图，其中存在一个表单和一个 table。通过我的 jQuery 代码 "table id ="divEdit"" 在开始时是不可见的，应该出现，当我 "submit id ="btnEdit"" 形式：

$(function () {
$("#divEdit").hide();

$("#btnEdit").click(function (e) {
    e.preventDefault()
    $("#divEdit").show();
});
});

一开始一切都很棒，table 是不可见的，我可以在我的表单中插入一些东西，这是一个搜索功能，有两个输入过滤我的 table 的内容.

表单的值将发送到我的 Index 控制器和此控制器 returns table 的内容。 控制器：

public ActionResult Index(string Product, string searchString2)
    {
        //List of all Products
        List<SelectListItem> product = new List<SelectListItem>();
        Productlist(product);
        ViewBag.Product = new SelectList(product, "Value", "Text");

        //Compares the inserted Product and S_N with the ProductName and Serial in the DB Tabel Products
        var newproducts = from n in db.Products select n;
        if ((!String.IsNullOrEmpty(Product)) && (!String.IsNullOrEmpty(searchString2)))
        {
            newproducts = newproducts.Where(n => n.ProductName.Contains(Product) && n.Serial.Contains(searchString2));
            //Saves the Data in DB NewProducts so you dont have to insert it again if the product doesnt exists 
            db.NewProducts.Add(new NewProduct { Product = Product, S_N = searchString2 });
            db.SaveChanges();
            ViewBag.ID = db.NewProducts.Max(d => d.id);

        }

        return View(newproducts.ToList()); 

    }

但是当我提交表单时，table（未过滤）的全部内容都会显示出来。提交在第一次点击后有一个男性功能，根本不会做任何事情。 table 在我向表单中插入新值后不会更新。

场景 2

我发现 e.preventDefault() 是停止更新的那个，所以我擦掉了它，现在我的脚本看起来像这样：

$(function () {
$("#divEdit").hide();

$("#btnEdit").click(function () {
    $("#divEdit").show();
});
});

但这不是我的问题的解决方案。现在他更新了我的 table，但是

我只能看到table一秒钟
当我第二次使用提交时，他向我展示了整个 table 的全部内容（未过滤的内容），我必须第二次点击它才能在 table

你知道如何解决这个问题吗？

提前致谢。

查看：

@model IEnumerable<Escalationmanagementtool.Models.Product>
@section Scripts {

 <script src="~/Scripts/GetCustomers.js" type="text/javascript"></script>

 }
@{
ViewBag.Title = "Index";
}


@using (Html.BeginForm())
{
<p>

    Product: @Html.DropDownList("Product", "Select Product")
    Serial number: @Html.TextBox("SearchString2")  

    <input type="submit" value="Search" id ="btnEdit" runat="server"/></p>

}



<table id ="divEdit" runat="server" style= "display:none">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Customer.Name)
    </th>
    <th></th>
</tr>
@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Customer.Name)
    </td>
    <td>
        @Html.ActionLink("Choose", "Chosen", "New", new { id=item.Id, idc = item.Customer }, null) 
     </td>
</tr>
}

</table>


@Html.ActionLink("Search", "Search", "Add", new { ID = ViewBag.ID }, null)

Answer 1

以上几点的问题可能如下-

1.（我只能看到table一秒钟）

这里页面再次刷新执行行 - $("#divEdit").隐藏(); 因此它会在执行该行后隐藏 table 并且您会在执行该行前几秒钟看到 table。

2.（当我第二次使用提交时，他向我展示了整个 table 的全部内容（未过滤的内容），我必须第二次点击它才能看到我的table)

中过滤的内容

此处，当您第一次提交时，执行的行是- $("#btnEdit").click(函数 () { $("#divEdit").show(); }); 所以只有 table 出现并且没有提交表单来过滤 table，只有当你再次点击它时它才会过滤。当您第二次单击时，将提交表单以过滤 table..

希望这有助于解决您的问题..

Answer 2

我找到了另一个解决方案 ajax 在点击提交后首先显示 table。因此我使用了 Azim Zahir 的教程。您可以在 http://www.codeproject.com/Tips/886473/Implementing-AJAX-in-ASP-NET-MVC 上找到它。在我在这里没有得到有用的回应之后，我在没有编写自己的脚本的情况下寻找其他解决方案。经验教训：不要只关注一种解决方案 ;)。

希望它能帮助您找到适合您的 Webtool 的解决方案。

提交后显示和隐藏过滤内容 table(jQuery)

Show and hide table with filtered content after submit(jQuery)

javascript

jquery

submit

asp.net-mvc-4