asp.net mvc中的多个Ajax加载问题

【问题标题】：Multiple Ajax loading problem in asp.net mvcasp.net mvc中的多个Ajax加载问题
【发布时间】：2019-02-27 23:50:59
【问题描述】：

我有一个下拉列表和文本框。当我选择一个下拉值并将值输入到文本框中，然后单击提交按钮时，我在 ajax 函数中获得了值。如果我再次单击提交按钮，在同一个表中加载值，但我的要求是通过清除先前显示的值来加载值？

jquery：

$(document).ready(function() {
  $("#btnSubmit").click(function(e) {
    e.preventDefault();
    var search = jQuery('[id$=txtsearchType]').val();
    var tittle = jQuery('[id$=txtName]').val();

    if (search != ' ' && tittle != '') {

      if (search == "getgeneric" || search == "getbrand") {
        $.ajax({
          type: "GET",
          contentType: "application/json; charset=utf-8",
          url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
          //data: "{ } ",
          dataType: "json",
          success: function(data) {
            var items = '';
            $.each(data, function(i, item) {
              $("#findValue").show();
              var rows = "<tr>" +
                "<td>" + (i + 1) + "</td>" +
                "<td>" + item[1] + "</td>" +
                "<td>" + item[5] + "</td>" +
                "<td>" + item[2] + "</td>" +
                "<td>" + item[3] + "</td>" +
                "<td>" + item[4] + "</td>" +
                "<td>" + item[6] + "</td>" +
                "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                "</tr>";
              $('#example tbody').append(rows);
            });
          },
          error: function(result) {
            alert("Error" + result);
          }
        });
      } else if (search == "getcompany") {

        $.ajax({
          type: "GET",
          contentType: "application/json; charset=utf-8",
          url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
          //data: "{ } ",
          dataType: "json",
          success: function(data) {
            var items = '';
            $.each(data, function(i, item) {
              $("#findcompany").show();
              var rows = "<tr>" +
                "<td>" + (i + 1) + "</td>" +
                "<td>" + item[1] + "</td>" +
                "<td>" + item[2] + "</td>" +
                "<td>" + item[3] + "</td>" +
                "<td>" + item[4] + "</td>" +
                "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                "</tr>";
              $('#example tbody').append(rows);
            });
          },
          error: function(result) {
            alert("Error" + result);
          }
        });


      } else if (search == "getsubstitue") {

        $.ajax({
          type: "GET",
          contentType: "application/json; charset=utf-8",
          url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
          //data: "{ } ",
          dataType: "json",
          success: function(data) {
            var items = '';
            $.each(data, function(i, item) {
              $("#findsubstitue").show();

              var ids = data[i];

              var rows = "<tr>" +
                "<td>" + (i + 1) + "</td>" +
                "<td>" + item[1] + "</td>" +
                "<td>" + item[2] + "</td>" +
                "<td>" + item[3] + "</td>" +
                "<td>" + item[4] + "</td>" +
                "<td>" + item[5] + "</td>" +
                "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                "</tr>";
              $('#example tbody').append(rows);
            });
          },
          error: function(result) {
            alert("Error" + result);
          }
        });


      } else if (search == "gettherapeutic") {

        $.ajax({
          type: "GET",
          contentType: "application/json; charset=utf-8",
          url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
          //data: "{ } ",
          dataType: "json",
          success: function(data) {
            var items = '';
            $.each(data, function(i, item) {
              $("#findgettherapeutic").show();

              var ids = data[i];

              var rows = "<tr>" +
                "<td>" + (i + 1) + "</td>" +
                "<td>" + item + "</td>" +
                "</tr>";
              $('#example tbody').append(rows);
            });
          },
          error: function(result) {
            alert("Error" + result);
          }
        });


      }


    } else {
      alert('Cannot blank must be filled out')
    }
  });

});

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="card">
  <div class="card-block">
    <div class="row">
      <div class="col-lg-4">
        <fieldset class="form-group">
          @Html.LabelFor(model => Model.SearchType, new { @class = "form-label semibold control-label" })
          <select class="select2-arrow" id="txtsearchType" name="searchType">
            <option>-- Select Search Type --</option>
            <option value="getgeneric">Generic Search</option>
            <option value="getbrand">Brand Search</option>
            <option value="getcompany">Company Search</option>
            <option value="getsubstitue">Substitute Search</option>
            <option value="gettherapeutic">Therapeutic wise Search</option>
          </select>
          @Html.ValidationMessageFor(model => model.SearchType, "", new { @style = "color:red" })
        </fieldset>
      </div>
      <div class="col-lg-4">
        <fieldset class="form-group">
          <label class="form-label semibold control-label">Tittle</label> @Html.TextBoxFor(model => model.ProductName, new { @class = "form-control", @id = "txtName", placeholder = "Search Name" }) @Html.ValidationMessageFor(model => model.ProductName,
          "", new { @style = "color:red" })
        </fieldset>
      </div>
    </div>
    <input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" />
    <span style="color:green">@ViewBag.Message</span>

    <br />
    <br /> @* getgeneric and getbrand *@
    <div class="table-responsive" id="findValue" style="display:none;">
      <table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
        <thead>
          <tr>
            <th>ID</th>
            <th>Generic Name</th>
            <th>Brand Name</th>
            <th>Strength</th>
            <th>Form</th>
            <th>Pack</th>
            <th>Price</th>
            <th>Actions</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    @* getcompany *@
    <div class="table-responsive" id="findcompany" style="display:none;">
      <table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
        <thead>
          <tr>
            <th>ID</th>
            <th>Brand Name</th>
            <th>Form</th>
            <th>Strength</th>
            <th>Pack</th>
            <th>Actions</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    @* getcompany *@
    <div class="table-responsive" id="findsubstitue" style="display:none;">
      <table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
        <thead>
          <tr>
            <th>ID</th>
            <th>Brand Name</th>
            <th>Manufacturer</th>
            <th>Strength</th>
            <th>Form</th>
            <th>price</th>
            <th>Actions</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    @* getcompany *@
    <div class="table-responsive" id="findgettherapeutic" style="display:none;">
      <table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
        <thead>
          <tr>
            <th>ID</th>
            <th>Generic Name</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>

  </div>
</section>

【问题讨论】：

    标签： javascript jquery html css asp.net-ajax


    【解决方案1】：

    如果遇到语法错误，请与我分享

    HTML：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="card">
    <div class="card-block">
        <div class="row">
            <div class="col-lg-4">
                <fieldset class="form-group">
                    @Html.LabelFor(model => Model.SearchType, new { @class = "form-label semibold control-label" })
                    <select class="select2-arrow" id="txtsearchType" name="searchType">
                        <option>-- Select Search Type --</option>
                        <option value="getgeneric">Generic Search</option>
                        <option value="getbrand">Brand Search</option>
                        <option value="getcompany">Company Search</option>
                        <option value="getsubstitue">Substitute Search</option>
                        <option value="gettherapeutic">Therapeutic wise Search</option>
                    </select>
                    @Html.ValidationMessageFor(model => model.SearchType, "", new { @style = "color:red" })
                </fieldset>
            </div>
            <div class="col-lg-4">
                <fieldset class="form-group">
                    <label class="form-label semibold control-label">Tittle</label> @Html.TextBoxFor(model => model.ProductName, new { @class = "form-control", @id = "txtName", placeholder = "Search Name" }) @Html.ValidationMessageFor(model => model.ProductName, "", new { @style = "color:red" })
                </fieldset>
            </div>
        </div>
        <input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" />
        <span style="color:green">@ViewBag.Message</span>

        <br />
        <br /> @* getgeneric and getbrand *@
        <div class="table-responsive" id="findValue" style="display:none;">
            <table id="tblFindValue" class="display table table-bordered" cellspacing="0" width="100%;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Generic Name</th>
                        <th>Brand Name</th>
                        <th>Strength</th>
                        <th>Form</th>
                        <th>Pack</th>
                        <th>Price</th>
                        <th>Actions</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        @* getcompany *@
        <div class="table-responsive" id="findcompany" style="display:none;">
            <table id="tblFindcompany" class="display table table-bordered" cellspacing="0" width="100%;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Brand Name</th>
                        <th>Form</th>
                        <th>Strength</th>
                        <th>Pack</th>
                        <th>Actions</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        @* getcompany *@
        <div class="table-responsive" id="findsubstitue" style="display:none;">
            <table id="tblFindsubstitue" class="display table table-bordered" cellspacing="0" width="100%;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Brand Name</th>
                        <th>Manufacturer</th>
                        <th>Strength</th>
                        <th>Form</th>
                        <th>price</th>
                        <th>Actions</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        @* getcompany *@
        <div class="table-responsive" id="findgettherapeutic" style="display:none;">
            <table id="tblFindgettherapeutic" class="display table table-bordered" cellspacing="0" width="100%;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Generic Name</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>
</section>

    JS：

    $(document).ready(function () {
    $("#btnSubmit").click(function (e) {
        e.preventDefault();

        var search = jQuery('#txtsearchType').val();
        var tittle = jQuery('#txtName').val();

        if (search == '' || tittle == '') {
            alert('Cannot blank must be filled out');
            return;
        };

        GetData(search, tittle, function (data) {

            var $html = '';
            var $table = null;
            var $displayItem = null;

            switch (switch_on) {

                case "getgeneric":
                case "getbrand":
                    $table = $('#tblFindValue > tbody');
                    $displayItem = $("#findValue");
                    $.each(data, function (i, item) {
                        $html += "<tr>" +
                            "<td>" + (i + 1) + "</td>" +
                            "<td>" + item[1] + "</td>" +
                            "<td>" + item[5] + "</td>" +
                            "<td>" + item[2] + "</td>" +
                            "<td>" + item[3] + "</td>" +
                            "<td>" + item[4] + "</td>" +
                            "<td>" + item[6] + "</td>" +
                            "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                            "</tr>";
                    });
                    break;

                case "getcompany":
                    $table = $('#tblFindcompany > tbody');
                    $displayItem = $("#findcompany");
                    $.each(data, function (i, item) {
                        $html += "<tr>" +
                            "<td>" + (i + 1) + "</td>" +
                            "<td>" + item[1] + "</td>" +
                            "<td>" + item[2] + "</td>" +
                            "<td>" + item[3] + "</td>" +
                            "<td>" + item[4] + "</td>" +
                            "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                            "</tr>";
                    });
                    break;

                case "getsubstitue":
                    $table = $('#tblFindsubstitue > tbody');
                    $displayItem = $("#findsubstitue");
                    $.each(data, function (i, item) {
                        var ids = data[i];
                        $html += "<tr>" +
                            "<td>" + (i + 1) + "</td>" +
                            "<td>" + item[1] + "</td>" +
                            "<td>" + item[2] + "</td>" +
                            "<td>" + item[3] + "</td>" +
                            "<td>" + item[4] + "</td>" +
                            "<td>" + item[5] + "</td>" +
                            "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                            "</tr>";
                    });
                    break;

                case "gettherapeutic":
                    $table = $('#tblFindgettherapeutic > tbody');
                    $displayItem = $("#findgettherapeutic");
                    $.each(data, function (i, item) {
                        var ids = data[i];
                        $html += "<tr>" +
                            "<td>" + (i + 1) + "</td>" +
                            "<td>" + item + "</td>" +
                            "</tr>";
                    });
                    break;
            };

            $table.empty().append($html);
            $displayItem.show();
        });
    });
});

function GetData(search, tittle, successEvent) {
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
        //data: "{ } ",
        dataType: "json",
        success: function (data) {
            successEvent(data);
        },
        error: function (result) {
            alert("Error" + result);
        }
    });
};

    【讨论】：

    • 如果正在搜索getgeneric，它会在同一页面上显示表格如果搜索getcompany 它不会隐藏getgeneric 表格如何隐藏上一个
    • @IvinRaj 一点也不
    【解决方案2】：

    因为您的按钮类型是“提交”。请尝试将您的按钮类型更改为“按钮”。像这样：

    <input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" /> <span style="color:green">@ViewBag.Message</span>

    <input type="button" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" /> <span style="color:green">@ViewBag.Message</span>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-10-18
      • 1970-01-01
      • 2015-02-24
      • 2011-09-29
      • 2017-01-22
      • 2011-09-21
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode