Click here to Skip to main content
14,040,432 members
Rate this:
Please Sign up or sign in to vote.
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 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 .

What I have tried:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
<title>Validation With AngularJs</title>
<link rel="stylesheet" href="" />
<link rel="stylesheet" type="text/css" href="" />
<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">
<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 is required!</p>
<div class="form-group col-md-6">
<label for="txtLanguageFont" data-ng-class="{ 'text-danger' : frmLanguage.LanguageFont.$invalid && !frmLanguage.LanguageFont.$pristine || frmLanguage.LanguageFont.$error.minlength,'text-success':!frmLanguage.LanguageFont.$pristine || frmLanguage.LanguageFont.$valid}">Language font</label>
<input type="text" class="form-control" id="txtLanguageFont" name="LanguageFont" data-ng-class="{ 'is-invalid' : frmLanguage.LanguageFont.$invalid && !frmLanguage.LanguageFont.$pristine,'is-valid' : !frmLanguage.LanguageFont.$pristine || frmLanguage.LanguageFont.$valid}" value="Arial Unicode MS" placeholder="Language font" required />
<p data-ng-show="frmLanguage.LanguageFont.$invalid && !frmLanguage.LanguageFont.$pristine && !frmLanguage.LanguageFont.$error.minlength" class="invalid-feedback">Language font is required!</p>
<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 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"> Create</button>
<div class="form-group col-md-4">
<button type="button" id="btnCancel" class="btn btn-outline-danger btn-block secon-sh-btn-danger"> Cancel</button>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script type="text/javascript">
var app = angular.module('rouUtility', []);
app.controller('MainCtrl', function ($scope) {
// $scope.LanguageFont = "Arial Unicode MS";
=====================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........ 
Updated 24-Jan-19 1:21am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

The UpdatePanel is the problem. You need to bootstrap your Angular code again when the update is complete:
Another title for this post might have been “Using AngularJS with ASP.NET Update Panels” as that was the circumstance I found myself in.
Anilananda 24-Jan-19 23:11pm
In my case then where i should define controller, when i am trying to bootstrap angular code it is giving error.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Cookies | Terms of Service
Web06 | 2.8.190425.1 | Last Updated 24 Jan 2019
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100