asp.net webform vb 在下拉列表中添加新记录

Question

I Have A Asp.net DropDownList return Data from a 1st table and insert to 2nd table we are inserting Name, Age and position to the 2nd table which the position is returning data from 1st table. the question is where there was a new record we will first add in the 1st table then refresh the page to be able to get the new record. is there is a way when click on dropdownlist at the end of the existing record will be a button "add new" and when click open a popup add new record after that the record add in a 1st table and also be available in the dropdownlist without refresh the page. is this possible?

Answer 1

Everything up to the issue of NOT wanting to re-fresh the page was great.

How big of a deal is a page post back? I mean if you have several buttons on that form, then the page should be able to tolerate a post back. The reason for this issue/question/point is that WHEN you can allow post-backs, then you have a LOT of options and options that allow a lot of freedom to shove in a dialog pop-up that lets you add a new value to the combo box. And keep in mind that pop option to add a new row to the combo box (dropdownlist) will have to be re-bound with the just newly added row.

If push comes to shove and you REALLY can't tolrate the postback, then you can place the combo box and the "add" to combo box in a update panel.

Next up: Because we want to pop a dialog? I would recommend adopting jQuery.UI. You have a good chance that jQuery is already included in your project, and thus adopting jQuery.UI is not much more.

There are bootstrap dialogs also - but they are really difficult to work with.

So, lets lay out how this will work.

So, assume we have a little bit of markup a few text boxes, and that dropdown.

Say this:

<div style="padding:5px;float:left;width:250px;text-align:right">
    Hotel Name: <asp:TextBox ID="txtHotelName" runat="server"  Width="130px" />
    <br />
    First Name: <asp:TextBox ID="txtFirst" runat="server"  Width="130px" />
    <br />
    Last Name: <asp:TextBox ID="txtLast" runat="server" Text ='<%# Eval("LastName") %>'  Width="130px" />
    <br />

    <div>
    City : <asp:DropDownList ID="cboCity" runat="server" DataTextField="City" 
        DataValueField="City" Width="110px">
        </asp:DropDownList>
        <div style="float:right;text-align:center;margin-left:4px;margin-top:-1px">
        <asp:Button ID="cmdAddCity" runat="server" Text="+" 
                OnClientClick="AddCity();return false"
                style="padding-left:4px;padding-right:8px;width:12px;height:16px;Font-Size:8px"
            />
        </div>
    </div>
    Active: <asp:CheckBox ID="chkActive" runat="server" Checked = '<%# Eval("Active") %>'/>
</div>

Not much to above, and we get this:

Of course on page load, I filled the drop list with code. I have this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If IsPostBack = False Then

        LoadCombo

    End If

End Sub

Sub LoadCombo()

    Using cmdSQL As New SqlCommand("SELECT City from tblCity ORDER BY City", New SqlConnection(My.Settings.TEST3))

        cmdSQL.Connection.Open()
        cboCity.DataSource = cmdSQL.ExecuteReader
        cboCity.DataBind()

    End Using

End Sub

As noted, we do tend to write statup + load up code in the page load event, but note how I test for ONLY the first post back. Thus, you can quite much write pages that can "survie" a post back.

Ok, so now we need a popup for the jQuery.UI. These are nice, since we don't have to create a whole new web page. The markup for this pop up form (a div) in the current page can/will look like this:

   <div id="CityDialog" style="display:Normal" title="Add New City">
        <br />
        <asp:TextBox ID="txtNewCity" runat="server" Placeholder="Enter New City" ClientIDMode="Static" ></asp:TextBox>
        <br />
        <br />

        <asp:Button ID="cmdOkAddCity" runat="server" Text="Add" ClientIDMode="Static" />
        <asp:Button ID="cmdCityCancel" runat="server" Text="Cancel" ClientIDMode="Static" 
            OnClientClick="$('#CityDialog').dialog('close');return false;"
            style="margin-left:20px"/>
    </div>

So we add a title to the div. a text box for the new city to add. And two simple standard asp.net buttons.

So, we add above to the above page. and then double click on the cmdOkAdd button, and write the code to add a new row to the combo box.

That code looks like this:

Protected Sub cmdOkAddCity_Click(sender As Object, e As EventArgs) Handles cmdOkAddCity.Click

    If txtNewCity.Text <> "" Then

        Using cmdSQL As New SqlCommand("INSERT INTO tblCity (City) VALUES (@City)", New SqlConnection(My.Settings.TEST3))

            cmdSQL.Parameters.Add("@City", SqlDbType.NVarChar).Value = txtNewCity.Text
            cmdSQL.Connection.Open()
            cmdSQL.ExecuteNonQuery()

            ' re-load combo
            LoadCombo()

            '
            ' set cbo to the new value we just added
            cboCity.Text = txtNewCity.Text

        End Using

    End If

End Sub

Again, real simple code. (and all easy code behind so far). So what above does is check if the user did enter that new city into the text box, and if yes, then we add the row to the database, and then re-load the combo box and then we SET the combo box to the new city just added. This makes for a easy flow, as the user can then click on that little "+" button beside the combo box, and we pop a dialog, and then the user enters the city, and hits the ok button to run above code stub.

Ok, now we have to setup the jQuery.UI. yes, this is a WEE bit of JavaScript, but NOT much.

So, that "+" button beside the drop down? It is a regular asp button, it is going to pop that jQuery.UI dialog. That button looks like this:

 <asp:Button ID="cmdAddCity" runat="server" Text="+" 
    OnClientClick="AddCity();return false"
   style="padding-left:4px;padding-right:8px;width:12px;height:16px;Font-Size:8px"
    />

Note how we have OnClientClick= - that's going to run our JavaScript code stub.

So, say right after that last tag, we have this code:

</form>
    <script>
        function AddCity() {
            $("#CityDialog").dialog({
                modal: true,
                width: "220px",
                resizable: false,
                appendTo: "form"
            });
        }
    </script>

Not much code. What that code does it pop the "div" as a nice way cool dialog form. And it turns the rest of the background into a "disabled gray".

So, it works well. And last but not least? We have to hide that dialog div. Remember, don't hide it at first, since we need to double click on the Ok button (add city button) to wire up our add event. Once done, then we hide that div by changing display:normal to Display:none. Eg this:

   <div id="CityDialog" style="display:none" title="Add New City">
        <br />
        <asp:TextBox ID="txtNewCity" runat="server" Placeholder="Enter New City" ClientIDMode="Static" ></asp:TextBox>
        <br />
        <br />

        <asp:Button ID="cmdOkAddCity" runat="server" Text="Add" ClientIDMode="Static" />
  ... etc. etc.

Ok, now with the above? Well, then we now have this setup:

Answer 2

The code was very helpful but When add all code The popup is not triggering, the second thing How make the dropdown ID connected to the city table ID column not the city column this is my code: Download The Code