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>

按下退格按钮时选择自动完成触发回发

1 个答案: