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


What I have tried:

<%@ 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 is required!</p>
</div>
<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>
</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"> 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"> 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........ 
Posted
Updated 24-Jan-19 1:21am

1 solution

Rate this: bad
 
good
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.
   
Comments
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