按下退格按鈕時選擇自動完成觸發回發

Question

我在ASP.NET WebForms項目中使用Selectize.js 。 我正在使用此插件將ASP.NET服務器端DropDown轉換為自動完成下拉菜單。 下拉菜單的文本和值綁定到數據集，並在選擇某項時觸發回發，從而將頁面重定向到另一個頁面。 一切工作正常，但當我在“選擇自動完成”中搜索項目時按退格按鈕時，它將完全刪除先前的文本，並使用最后選擇的下拉選項重定向到頁面。 以下是代碼：

ASP.NET代碼：

<asp:DropDownList ID="ddlClients" runat="server" OnSelectedIndexChanged="ddl_SelectedIndexChanged"
                AutoPostBack="true" Font-Size="Larger" class="demo-default" placeholder="Select a hospital...">

選擇初始化：

$('#<%=ddlClients.ClientID %>').selectize({
                allowEmptyOption: true,
                sortField: 'text',
                searchField: 'text',
                valueField: 'value'
            });

Answer 1

這將解決退格問題。 （我修復了我的代碼。）

在您的RouteConfig.cs中

//routes.EnableFriendlyUrls();

var settings = new FriendlyUrlSettings();
settings.AutoRedirectMode = RedirectMode.Off; // RedirectMode.Permanent
routes.EnableFriendlyUrls(settings);

在您的Shiva2.aspx中

<%@ Page ClientIDMode="Static" Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Shiva2.aspx.cs" Inherits="FredWebForm.Shiva2" %>

<%--!!!Need the ClientIDMode above  ClientIDMode="Static"--%>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <link href="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Custom-Tags-Input-Select-Box-selectize-js/selectize.css" rel="stylesheet">
    <link href="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Custom-Tags-Input-Select-Box-selectize-js/examples/_stylesheet.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: "Shiva2.aspx/GetData",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $('#<%=selectbeast.ClientID %>').empty();
                    $.each(JSON.parse(result.d), function (i, anObj) {
                        $('#<%=selectbeast.ClientID %>').append($('<option>').text(anObj.Text).attr('value', anObj.Value));
                    });
                    $('#selectbeast').val("");
                    $('#selectbeast').selectize({
                        allowEmptyOption: true,
                        sortField: 'text',
                        searchField: 'text',
                        valueField: 'value'
                    });
                },
                error: function (xhr, status) {
                    alert("An error occurred: " + status);
                }
            });
            $('#<%=selectbeast.ClientID %>').change(function () {
                //this gets called twice the way the library was written

                //user made a selection
                if ($('#<%=selectbeast.ClientID %>').val() != "0" && $('#<%=selectbeast.ClientID %>').val() != "") {
                    //there is only one form in webforms
                    document.forms[0].submit();
                }
            })
        });
    </script>
    <div class="demo">
        <%--I could not use asp:DropDownList because autopost repeated posts--%>
        <select runat="server" id="selectbeast" class="demo-default" placeholder="Select a hospital..." />
    </div>
</asp:Content>

Shiva2.aspx.cs

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace FredWebForm
{
    public class SelectListItem
    {
        public SelectListItem(string text, string value)
        {
            Text = text;
            Value = value;
                       }
        public string Text { get; set; }
        public string Value { get; set; }
         }

    public partial class Shiva2 : System.Web.UI.Page
    {
        [WebMethod(EnableSession = true)]
        public static string GetData()
        {
            List<SelectListItem> items = new List<SelectListItem>();
            items.Add(new SelectListItem("", ""));
            items.Add(new SelectListItem("Abrazio", "1"));
            items.Add(new SelectListItem("Humana", "2"));
            items.Add(new SelectListItem("Good Samaritan", "3"));
            //GET NewtonSoft JSON
            return JsonConvert.SerializeObject(items);
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            var passParmValue = Request.Form["ctl00$MainContent$selectbeast"]; 
            //var passParmValue = selectbeast.Value;
            if (!String.IsNullOrWhiteSpace(passParmValue))
            {
                Server.Transfer("~/Shiva3.aspx");
            }
        }
    }
}

Shiva3.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Shiva3.aspx.cs" Inherits="FredWebForm.Shiva3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    My other Page
</asp:Content>