You must Sign In to post a response.
  • Category: ASP.Net MVC

    Popup for insert the record and savechanges dialopg

    Hi ,

    Any one tell me the step by step process to open the popup for insert the record in db. After click on insert the popup should close. If he enter some data and leaving the popup it should ask for save changes dialog.

    Regards,
    KotiReddy.
  • #767400
    Hi,

    You can use AJAX Modal popup, and design the controls as you want in that popup and click on save button store the data into database.


    <asp:Button ID="btnShowPop" Text="Show Popup" runat="server" />
    <cc1:ModalPopupExtender ID="mpe" runat="server" TargetControlID=" btnShowPop"
    PopupControlID="pnlPopup" BackgroundCssClass="modalBackground">
    </cc1:ModalPopupExtender>

    <asp:Panel ID="pnlPopup" runat="server" >
    <table width="100%" >

    <tr>
    <td>
    <asp:Label ID="lbl1" Text="Enter Employee Name" runat="server" />
    </td>
    <td>
    <asp:TextBox ID="txt1" runat="server" />
    </td>
    <td>
    <asp:Label ID="lbl2" Text="Enter Job" runat="server" />
    </td>
    <td>
    <asp:TextBox ID="txt2" runat="server" />
    </td>
    <td align="right" style="padding-right: 15px">
    <asp:UpdatePanel ID="upCancel" runat="server" UpdateMode="Always">
    <ContentTemplate>
    <asp:Button ID="btnSave" OnClick="btnSave_Click" runat="server"/>
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnCancelYes" EventName="Click" />
    </Triggers>
    </asp:UpdatePanel>
    </td>
    </tr>
    </table>
    </asp:Panel>



    and on button click event just save the data into database.


    Protected void btnSave_Click(object sender, EventArgs e)
    {
    //save data into database.
    }


    Try something like above to achieve your goal, hope this will helpful to you...

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #767407
    Hi Venkat
    My code is working exactly

    you can done your requirement just with Css and Jquery

    just copy and paste my code to your aspx page

    Impotrant
    need to add Java Script
    jquery.js , bootstrap.min.js
    need to Add Css
    bootstrap.min.css"

    Aspx Code :

    head
    bootstrap.min.css
    jquery.js
    bootstrap.min.js

    Body :


    <%-- < a class="btn btn-primary" data-toggle="modal" data-target="#myModal21" role="button" style="width:100%;" >APPLY NOW<br>< /a>

    < div class="modal fade" id="myModal21" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    < div class="modal-dialog">
    < div class="modal-content">
    < div class="modal-header">
    < button type="button" class="close" data-dismiss="modal" aria-hidden="true">×< /button>
    < h4 class="text-bold text-danger" id="myModalLabel">APPLICATION FORM</h4>

    < /div>
    < div class="modal-body">
    < div class="text">

    <!-- 1 -->





    < div class="media">
    < div class="col-sm-12 col-md-12" >

    < div class="col-md-4 col-sm-4" style="color:#000000;margin-top:-23px;">
    < table >
    < tr>
    < td><b>First Name</b></td>

    < /tr>

    < tr>
    < td>
    < asp:TextBox ID="txtfirstname" runat="server"></asp:TextBox>
    < asp:RequiredFieldValidator ID="rfv1" runat="server" ErrorMessage="Required .!" ForeColor="#cc3300"
    Display="Dynamic" ControlToValidate="txtfirstname" ValidationGroup="add">< /asp:RequiredFieldValidator>
    < /td>
    </tr>
    < tr>
    < /tr>
    < tr>
    < td><b>Gender</b></td>
    < /tr>
    < tr>
    < td>
    <asp:DropDownList ID="ddown_gender" runat="server" Width="165px">
    <asp:ListItem Text="--Select--" Value="--Select--"></asp:ListItem>
    <asp:ListItem Text="Male" Value="Male"></asp:ListItem>
    <asp:ListItem Text="Female" Value="Female"></asp:ListItem>
    </asp:DropDownList>
    <asp:RequiredFieldValidator ID="rfv3" runat="server" ErrorMessage="Required .!" Display="Dynamic" ForeColor="#cc3300"
    ControlToValidate="ddown_gender" ValidationGroup="add" InitialValue="--Select--"></asp:RequiredFieldValidator>
    </td>
    </tr>

    <tr>
    <td><b>Telephone</b></td>
    <td><b></b></td>
    </tr>
    <tr>
    <td>
    <asp:TextBox ID="txttelephone" runat="server" MaxLength="10"></asp:TextBox>
    <asp:RequiredFieldValidator ID="rfv6" runat="server" ErrorMessage="Required .!" Display="Dynamic" ForeColor="#cc3300"
    ControlToValidate="txttelephone" ValidationGroup="add" ></asp:RequiredFieldValidator>
    </td>
    </tr>

    <%-- You Can also use File Upload--%>
    <%-- <tr>
    <td><b>SSLC Certificate <span style="color: #808080;">Size 1MB</span> </b></td>
    <td></td>
    <td><b></b></td>
    </tr>
    <tr>
    <td>
    <asp:FileUpload runat="server" ID="FileUploadSSLC" />
    <asp:RequiredFieldValidator ID="rfv26" runat="server" ErrorMessage="Required .!" Display="Dynamic" ForeColor="#cc3300"
    ControlToValidate="FileUploadSSLC" ValidationGroup="add"></asp:RequiredFieldValidator>
    </td>

    </tr>

    <tr>
    <td >
    <asp:Button ID="btnAdd" runat="server" Width="100px" BackColor="#0066ff" ForeColor="White"
    Text="APPLY" OnClick="btnAdd_Click" ValidationGroup="add" />
    </td>
    <td>
    <asp:Button ID="BtnReset" runat="server" Width="70" Text="RESET" OnClick="BtnReset_Click" />
    </td>
    </tr>

    <br />
    </table>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>--%>




    C # code :

    protected void btnAdd_Click(object sender, EventArgs e)
    {
    Add Connection string
    Write your insert code on here
    }
    protected void BtnReset_Click(object sender, EventArgs e)
    {
    Make all the fields null
    }

    note:
    if you add js and css then only code is works exactly

    Happy Coding

  • #767408
    hi venkat i did try to post exact answer for you

    but this page is having some iussue so i cant post my query on this page.
    if you don't mind you just post your mail id i will send attachment for you.
    or my mail id is lionpaul13@gmail.com just send me your mail id to mine.

  • #767434
    There's also the PopupForm helper which is used in all of the Crud demos (Grid, AjaxList), also in the Wizard Demo, the PopupForm handles form posts that happen inside it and has 2 buttons by default (OK, Cancel).
    I think you might want to check below link
    http://demo.aspnetawesome.com/PopupDemo

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #767439
    Basically you have to do the following .
    1. Use the Jquery
    2. Have one div. In the button click block the window and show the model div
    3. In the model div show all your controls that are required for save the data.
    4. Have save and close button.
    5. In the button click. Do one Jquery Ajax call. That should call webmethod.
    6. You can send the JSon as input by populating form your input control.
    7. Web method should save the data and return the result.
    8. In the Ajax call success /failure hand the alert message and unblock the popup window.

    The above is the main concept to do this. You can get lot of sample code in the net to do this.

    By Nathan
    Direction is important than speed


  • Sign In to post your comments