Hi, here i face some issue in my application . I have taken 3 textbox and two button all are normal HTML control. Among 3 textbox one textbox will be filled by default and another two textbox are empty. The submit button will be disable until requird textbox are not filled. This is the validation i have done with angularjs. It is a normal ASP.net project. One all the validation done the button will be enable and can save. I used Update Panel to avoid page load. Till here it is ok their is no issue .. but it happen only first time only. Once i press submit button(btnCreate) all the validation removed infact angularjs not working. I think may be some how angularjs file not loading when i press submit button. My requirement : It should continue the validation after button click(thats all). Note: i donot want page refress so i used update panel. If i remove update panel then their is no issue every thing is fine. but without page refresh i want .
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Validation With AngularJs</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager runat="server"></asp:ScriptManager> <div class="container-fluid" data-ng-app="rouUtility" data-ng-controller="MainCtrl"> <br /> <h5 class="text-center">Validation with angularjs</h5> <asp:UpdatePanel runat="server" ID="up1"> <ContentTemplate> <ng-form id="frmLanguage" name="frmLanguage"> <hr /> <div class="form-row"> <div class="form-group col-md-6"> <label for="txtLanguage" data-ng-class="{ 'text-danger' : frmLanguage.LanguageName.$invalid && !frmLanguage.LanguageName.$pristine || frmLanguage.LanguageName.$error.minlength,'text-success':!frmLanguage.LanguageName.$pristine}">Language name</label> <input type="text" class="form-control" id="txtLanguage" name="LanguageName" data-ng-class="{ 'is-invalid' : frmLanguage.LanguageName.$invalid && !frmLanguage.LanguageName.$pristine,'is-valid' : !frmLanguage.LanguageName.$pristine }" data-ng-model="LanguageName" placeholder="Language" required /> <p data-ng-show="frmLanguage.LanguageName.$invalid && !frmLanguage.LanguageName.$pristine && !frmLanguage.LanguageName.$error.minlength" class="invalid-feedback">Language font is required!</p> </div> </div> <div class="form-group"> <label for="txtLanguageRemarks">Remarks</label> <textarea class="form-control" id="txtLanguageRemarks" name="LanguageRemarks" rows="2" placeholder="About language" style="resize: vertical"></textarea> </div> <div class="form-row"> <div class="form-group col-md-4 offset-2"> <button id="btnCreate" runat="server" class="btn btn-outline-primary btn-block secon-sh-btn-primary" data-ng-disabled="frmLanguage.$invalid" onserverclick="btnCreate_Click" ng-click="go();" value="Create">^__i class="fa fa-check-square-o"> Create</button> </div> <div class="form-group col-md-4"> <button type="button" id="btnCancel" class="btn btn-outline-danger btn-block secon-sh-btn-danger">^__i class="fa fa-times-circle-o"> Cancel</button> </div> </div> </ContentTemplate> </asp:UpdatePanel> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://code.angularjs.org/1.2.21/angular.js"></script> <script type="text/javascript"> var app = angular.module('rouUtility', []); app.controller('MainCtrl', function ($scope) { // $scope.LanguageFont = "Arial Unicode MS"; }); </script> </body> </html> =====================Code Behind========== using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace Test { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnCreate_Click(object sender, EventArgs e) { string LanguageName = Request.Form["LanguageName"]; string LanguageFont = Request.Form["LanguageFont"]; string txtLanguageRemarks = Request.Form["LanguageRemarks"]; } } }
please some one help me out .... let me know in the comment please........
UpdatePanel
Integrating AngularJS in a Tight Spot | Travis J. Gosselin[^] Another title for this post might have been “Using AngularJS with ASP.NET Update Panels” as that was the circumstance I found myself in.
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)
Submit an article or tip