2011-07-01 2 views
0

Я использую автозаполнение jQuery в ASP.NET DropDownList, пользователь может выбрать значение и отправить для входа в БД. Но они также должны иметь возможность вводить значение, и я не могу получить доступ к этому значению в коде.Получить динамическое значение ввода HTML ASP.NET

Хереса JQuery:

(function ($) { 
$.widget("ui.combobox", { 
    _create: function() { 
     var self = this, 
       select = this.element.hide(), 
       selected = select.children(":selected"), 
       value = selected.val() ? selected.text() : ""; 
     var input = this.input = $("<input id='txtOptValue'>") 
       .insertAfter(select) 
       .val(value) 
       .autocomplete({ 
        delay: 0, 
        minLength: 0, 
        source: function (request, response) { 
         var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (this.value && (!request.term || matcher.test(text))) 
           return { 
            label: text.replace(
             new RegExp(
              "(?![^&;]+;)(?!<[^<>]*)(" + 
              $.ui.autocomplete.escapeRegex(request.term) + 
              ")(?![^<>]*>)(?![^&;]+;)", "gi" 
             ), "<strong>$1</strong>"), 
            value: text, 
            option: this 
           }; 
         })); 
        }, 
        select: function (event, ui) { 
         ui.item.option.selected = true; 
         self._trigger("selected", event, { 
          item: ui.item.option 
         }); 
        }, 
        change: function (event, ui) { 
         if (!ui.item) { 
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), 
           valid = false; 
          select.children("option").each(function() { 
           if ($(this).text().match(matcher)) { 
            this.selected = valid = true; 
            return false; 
           } 
          }); 
          if (!valid) { 
           // remove invalid value, as it didn't match anything 
           //$(this).val(""); 
           // select.val(""); 
           // input.data("autocomplete").term = ""; 
           return false; 
          } 
         } 
        } 
       }) 
       .addClass("ui-widget ui-widget-content ui-corner-left"); 

     input.data("autocomplete")._renderItem = function (ul, item) { 
      return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
     }; 

     this.button = $("<button type='button'>&nbsp;</button>") 
       .attr("tabIndex", -1) 
       .attr("title", "Show All Items") 
       .insertAfter(input) 
       .button({ 
        icons: { 
         primary: "ui-icon-triangle-1-s" 
        }, 
        text: false 
       }) 
       .removeClass("ui-corner-all") 
       .addClass("ui-corner-right ui-button-icon") 
       .click(function() { 
        // close if already visible 
        if (input.autocomplete("widget").is(":visible")) { 
         input.autocomplete("close"); 
         return; 
        } 

        // work around a bug (likely same cause as #5265) 
        $(this).blur(); 

        // pass empty string as value to search for, displaying all results 
        input.autocomplete("search", ""); 
        input.focus(); 
       }); 
    }, 

    destroy: function() { 
     this.input.remove(); 
     this.button.remove(); 
     this.element.show(); 
     $.Widget.prototype.destroy.call(this); 
    } 
}); 
})(jQuery); 

Так что это берет моего DropDownList, скрывает это, создает поле ввода действует как мой выбор, а также позволяет мне вводить значение .. Это мой DropDownList:

  <asp:FormView ID="frmCreateOptionValue" runat="server" DataKeyNames="OptionValueID" 
      DataSourceID="OptionSetValues_DS" DefaultMode="Insert" 
      oniteminserting="frmCreateOptionValue_ItemInserting"> 
      <InsertItemTemplate> 
       <table border="0" cellpadding="0" cellspacing="0" id="id-form"> 
        <tr> 
         <th> 
          Add Option Set Value: 
         </th> 
         <td> 
          <div class="ui-widget" runat="server" id="addOptValue"> 
           <asp:DropDownList ID="ddlAddOptionValue" runat="server" ClientIDMode="Static" DataSourceID="OptionValues_DS" 
            DataTextField="Name" DataValueField="OptionValueID" AppendDataBoundItems="true" 
            SelectedValue='<%# Bind("OptionValueID") %>'> 
            <asp:ListItem Value="" Text="Select One..." /> 
           </asp:DropDownList> 
           &nbsp; 
           <asp:ObjectDataSource ID="OptionValues_DS" runat="server" OldValuesParameterFormatString="original_{0}" 
            SelectMethod="GetDataBy1" TypeName="PurekbbDataSetTableAdapters.tblOptionValueTableAdapter"> 
            <SelectParameters> 
             <asp:QueryStringParameter Name="oID" QueryStringField="optionSetID" Type="Int32" /> 
            </SelectParameters> 
           </asp:ObjectDataSource> 
          </div> 
         </td> 
         <td> 
          <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" 
           CssClass="form-submit" /> 
         </td> 
        </tr> 
       </table> 
      </InsertItemTemplate> 
     </asp:FormView> 

И когда пользователь вставляет элемент:

protected void OptionSetValues_DS_Inserting(object sender, ObjectDataSourceMethodEventArgs e) 
{ 
    // if the value doesn't already exist, create it 
    if (e.InputParameters["OptionValueID"] == null) 
    { 
     // !!!! CANNOT FIND THE HTML INPUT AND SAVE THE VALUE 
     string ovName = ((TextBox)frmCreateOptionValue.FindControl("txtOptValue")).Text; 
     int ovOptionID = Convert.ToInt32(Request.QueryString["OptionSetID"]); 

     tblOptionValueTableAdapter t = new tblOptionValueTableAdapter(); 
     int ovID = Convert.ToInt32(t.InsertQuery(ovOptionID, ovName, 0, "")); 


     e.InputParameters["OptionValueID"] = ovID; 
    } 
} 

где я застрял, как я могу получить значение из этого поля ввода HTML, сгенерированного в jQuery?

Как это может быть достигнуто, это убивает меня;)

+1

проверить мой ответ http://stackoverflow.com/questions/6249549/how-i-can-got-the-value-who-are-define-n-times-in- в-form-in-asp-net-mvc/6249982 # 6249982 вы можете использовать тот же подход для этого. –

+0

Выглядит многообещающе, где бы я это сделал? – Leigh

+0

Horrah !! Большое спасибо @Miroprocessor .. Я добавил onblur на вход и скопировал значение в HiddenField, как вы сказали, работал шармом :) – Leigh

ответ

1

вы можете получить значение этого текстового поля с помощью JavaScript и сохранить его в скрытом поле, то прочитать скрытое значение поля из кода за

поместить это внутри Javascript

$('#HiddenFieldID').val($('#txtOptValue').val()); 

тогда код позади будет выглядеть

protected void OptionSetValues_DS_Inserting(object sender, ObjectDataSourceMethodEventArgs e) 
{ 
    // if the value doesn't already exist, create it 
    if (e.InputParameters["OptionValueID"] == null) 
    { 
     // !!!! CANNOT FIND THE HTML INPUT AND SAVE THE VALUE 
     string ovName = ((HiddenField)frmCreateOptionValue.FindControl("HiddenFieldID")).Value; 
     int ovOptionID = Convert.ToInt32(Request.QueryString["OptionSetID"]); 

     tblOptionValueTableAdapter t = new tblOptionValueTableAdapter(); 
     int ovID = Convert.ToInt32(t.InsertQuery(ovOptionID, ovName, 0, "")); 


     e.InputParameters["OptionValueID"] = ovID; 
    } 
} 
+0

Спасибо за вашу помощь @Miroprocessor, я также разместил полное решение, но отметил ваше как ответ , Spot on :) – Leigh

0

Heres решение этого, используя скрытое:

Добавить ONBLUR в динамически созданный вход:

(function ($) { 
$.widget("ui.combobox", { 
    _create: function() { 
     var self = this, 
       select = this.element.hide(), 
       selected = select.children(":selected"), 
       value = selected.val() ? selected.text() : ""; 
     var input = this.input = $("<input id='txtOptValue' onblur='JavaScript:copyValue()'>") .... 

Добавить скрытое и JQuery на странице:

<asp:HiddenField runat="server" ID="hfoValue" EnableViewState="true" ClientIDMode="Static" /> 
          <div class="ui-widget" runat="server" id="addOptValue"> 
           <script type="text/javascript" language="javascript"> 
            function copyValue() { 
             var theVal = $('#txtOptValue').val(); 
             //alert('Copyng ' + theVal); 
             $('#hfoValue').val(theVal); 
             //alert('copied'); 
            } 
           </script> 
           <asp:DropDownList ID="ddlAddOptionValue" runat="server" ClientIDMode="Static" DataSourceID="OptionValues_DS" 
            DataTextField="Name" DataValueField="OptionValueID" AppendDataBoundItems="true" 
            SelectedValue='<%# Bind("OptionValueID") %>'> 
            <asp:ListItem Value="" Text="Select One..." /> 
           </asp:DropDownList> ... 

Наконец получить доступ к значение от HiddenField:

protected void OptionSetValues_DS_Inserting(object sender, ObjectDataSourceMethodEventArgs e) 
{ 
    // if the value doesn't already exist, create it 
    if (e.InputParameters["OptionValueID"] == null) 
    { 
     // !!!! FOUND THE VALUE :) 
     string ovName = ((HiddenField)frmCreateOptionValue.FindControl("hfoValue")).Value; 
     int ovOptionID = Convert.ToInt32(Request.QueryString["OptionSetID"]); 

     tblOptionValueTableAdapter t = new tblOptionValueTableAdapter(); 
     int ovID = Convert.ToInt32(t.InsertQuery(ovOptionID, ovName, 0, "")); 


     e.InputParameters["OptionValueID"] = ovID; 
    } 
} 

@Miroprocessor за помощь в решении этой проблемы

+0

Спасибо, и ты рад :) –

Смежные вопросы