1
Answer

Insert Data using jquery and web methods

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style>
.fieldset {
border: 1px solid #ddd;
margin-top: 1em;
/*width: 500px;*/
border-radius: 5px;
}
.fieldset h1 {
font-size: 18px;
text-align: left;
padding-left: 10px;
color: white;
}
.fieldset h1 span {
display: inline;
border: 1px solid #ddd;
/*background: transparent;*/
padding: 5px 10px;
position: relative;
top: -1.3em;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="container" ng-app="fileUpload">
<div class="row" ng-controller="upload">
<div class="col-md-6">
<div class="fieldset ">
<h1><span class="label-success">Details</span></h1>
<div class="form-horizontal" style="padding: 5px;">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" ng-model="name" placeholder="Enter Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="address">Address:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="address" ng-model="address" placeholder="Enter Address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Please Upload Image:</label>
<div class="col-sm-9">
<input type="file" fileinput="file" id="FlgUpload" class="form-control" ng-model="uploadFile" filepreview="smallImage" />
</div>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-9">
<input type="button" class="btn btn-success" value="Submit" id="btnSubmit" />
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="fieldset ">
<h1><span class="label-success">Preview Details</span></h1>
<div style="padding: 5px;">
<div class="row">
<label class="col-sm-3">Name:</label>
<div class="col-sm-9">
<label ng-bind="name"></label>
</div>
</div>
<div class="row">
<label class="col-sm-3">Address:</label>
<div class="col-sm-9">
<label class="control-label" ng-bind="address"></label>
</div>
</div>
<div class="row">
<div>
<label class="control-label col-sm-3" for="pwd">Uploaded Image:</label>
<div class="col-sm-9">
<img ng-src="{{smallImage}}" class="img-responsive" style="border: thin solid #000000; max-width: 150px; max-height: 150px; width: 150px; height: 150px" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
 
 
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using Newtonsoft.Json;
using System.IO;
public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string SendParameters(string name, string address)
{
int instCode = 104;
Dictionary<string, string> dic = new Dictionary<string, string>();
dic.Add("name", name);
dic.Add("address", address);
string writeContent = JsonConvert.SerializeObject(dic);
File.WriteAllText(HttpContext.Current.Server.MapPath("~/Content/"+instCode.ToString()+"/StaticContent/data.json"), writeContent);
return "Data Saved";
}
}
 
 
 
 
var dataResponse;
var scope;
console.clear();
var uploadedFile;
var app = angular.module('fileUpload', []);
app.controller("upload", function ($scope) { })
.directive("fileinput", [function () {
return {
scope: {
fileinput: "=",
filepreview: "="
},
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
scope.fileinput = changeEvent.target.files[0];
var reader = new FileReader();
reader.onload = function (loadEvent) {
scope.$apply(function () {
scope.filepreview = loadEvent.target.result;
});
}
reader.readAsDataURL(scope.fileinput);
uploadedFile = scope.fileinput;
alert(uploadedFile);
});
}
}
}]);
function Message(Heading, text) {
var heading = text.split("<br>");
text = text.substring(text.indexOf(">", 1) + 1, text.length);
$.toast_noti({
text: text, // Text that is to be shown in the toast
heading: '<span style=\'font-weight: bold; color:#e74c3c;\'>' + Heading + '</span>',
//false,//'Notification', // Optional heading to be shown on the toast
showHideTransition: 'slide', // fade, slide or plain
allowToastClose: true, // Boolean value true or false
hideAfter: 5000,
// 15000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
stack: 5,
// false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
position: { top: 90, right: 10 },
//'top-right', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
bgColor: '#2F3A41', // '#444444', // Background color of the toast
textColor: '#fff', //'#ffffff', // Text color of the toast
textAlign: 'left', // Text alignment i.e. left, right or center
beforeShow: function () {
}, // will be triggered before the toast is shown
afterShown: function () {
}, // will be triggered after the toat has been shown
beforeHide: function () {
}, // will be triggered before the toast gets hidden
afterHidden: function () {
} // will be triggered after the toast has been hidden
});
}
$(function () {
$("[id*=btnSubmit]").click(function () {
var obj = {};
obj.name = $.trim($("[id*=name]").val());
obj.address = $.trim($("[id*=address]").val());
var uploadCtrl = $('#FlgUpload');
$.ajax({
type: "POST",
url: "/Default3.aspx/SendParameters",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
Message("Content", "Successfully Uploaded the Content");
uploadFiles(uploadCtrl);
}
});
return false;
;
});
});
function uploadFiles(uploadCtrl) {
var fileUpload = uploadCtrl.get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
$.ajax({
url: "/ImageHandler.ashx",
type: "POST",
data: data,
contentType: false,
processData: false,
success: function (result) { alert(result); },
error: function (err) {
Message("Image", "Successfully Uploaded the Image");
}
});
// evt.preventDefault();
}
 
 
 
 
 
 
 
 
Answers (1)
0
jemin patel

jemin patel

NA 18 613 7y
the error in crome
 
not allowed to load local resourse
 
to rectified it i try this but it not working
 
 C:\Program Files\Google\Chrome\Application\chrome.exe –allow-file-access-from-files -disable-web-security
0
Manas Mohapatra

Manas Mohapatra

NA 29.3k 3.3m 7y
Enable browser develop tool by pressing F12. In console tab see if you are getting any error.
 
Secondly,  inspect an element what is rendring in chrome browser.