Category: ASP.Net MVC

31 Jul 2016 22:34

Joined:	08/08/2006
Level:	Gold
Points:	647

Points:	2

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

31 Jul 2016 22:56

Joined:	03/05/2013
Level:	Gold
Points:	15822

Points:	4

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

01 Aug 2016 00:11

Joined:	13/08/2015
Level:	Silver
Points:	102

Points:	4

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">



< 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

01 Aug 2016 00:26

Joined:	13/08/2015
Level:	Silver
Points:	102

Points:	1

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

02 Aug 2016 00:27

Joined:	13/06/2007
Level:	Gold
Points:	21327

Points:	2

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

02 Aug 2016 02:51

Joined:	05/06/2009
Level:	Gold
Points:	10245

Points:	4

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

Popup for insert the record and savechanges dialopg

About dotnetspider.com

Quick Links

General

Services