How To Cleary Textbox In C# Codebehind using javascript without post back

Question

User-807418713 posted

Hello

In My Page I Have One Dropdownlist1 & Textbox1 with asp.net button

Now user select some data in dropdownlist1 and entering data in Textbox1 now user  clicking on button

on button it insert data to database and i want to show message datasaved and without postback dropdownlist1 and textbox1 should be clear.

I mean dropdownlist will come to selectedindex0 and textbox should be empty

Thank You

Answer 1

User-1038772411 posted

Hi, Gopi.MCA

In Controller After Save success (eg. Api return 200 status code) than, use tempdata for store message

TempData.Remove("labelssaved")
TempData["labelssaved"] = "Data Saved Successfully";
TempData.Keep("labelssaved");

In View Page :

 if (TempData["labelssaved"] != null)
    {
        <label class="success" style="color:green">@TempData["labelssaved"]</label>
        <div style="display:none">
            @TempData.Remove("labelssaved");
        </div>
    }

Without postback after save you can see the success message. and you want to remove after some second please use 

setTimeout(function(){  // Lable display Block And None as per requirement }, 3000);

Thanks.

Answer 2

User61956409 posted

Hi Gopi.MCA,

In My Page I Have One Dropdownlist1 & Textbox1 with asp.net button

Now user select some data in dropdownlist1 and entering data in Textbox1 now user  clicking on button

on button it insert data to database and i want to show message datasaved and without postback dropdownlist1 and textbox1 should be clear.

It seems that your are using asp:TextBox, asp:DropDownList etc controls in a ASP.NET WebForm application, to achieve the above requirement, you can refer to the following example.

Test.aspx

<div>
    Name:<asp:TextBox ID="txt_name" runat="server"></asp:TextBox>
    Gender:<asp:DropDownList ID="ddl_gender" runat="server">
        <asp:ListItem Value="0">---Select One---</asp:ListItem>
        <asp:ListItem Value="Male">Male</asp:ListItem>
        <asp:ListItem Value="Female">Female</asp:ListItem>
    </asp:DropDownList>
    <asp:Button ID="btn_save" runat="server" Text="Save" />
</div>

<script>
    $(function () {
        $("#btn_save").click(function (e) {
            var name = $("#txt_name").val();
            var gender = $("#ddl_gender :selected").val();

            var u_data = { "name": name, "gender": gender };
            $.ajax({
                type: "POST",
                url: "Test.aspx/SaveInfo",
                data: JSON.stringify(u_data),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (res) {
                    //reset txt_name and ddl_gender
                    $("#txt_name").val("");
                    $("#ddl_gender").val("0");

                    //show message "data saved"
                    alert(res.d);
                },
                failure: function (response) {
                    alert(response.d);
                }
            });

            e.preventDefault();
        })

    })
</script>

WebMethod

[System.Web.Services.WebMethod]
public static string SaveInfo(string name, string gender)
{
    //insert into database
    //code logic here

    return "data saved";
}

Test Result

With Regards,

Fei Han