Insert Data using jquery and web methods

Question

<%@ 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();

}