Asp.net проверка формы с помощью angularjs
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 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........