Как вызвать сервис WCF из JavaScript

Question

У меня есть несколько полей ввода на моей странице. Теперь, когда происходит событие нажатия кнопки, я хочу вызвать службу WCF, которая отвечает за хранение данных в базе данных.

<asp:Button runat="server" ID="btnCreateApplyTemplate" Text="Create" Style="text-transform: uppercase; color: #fff;"
                    CssClass="btn lr-small-btn-template lr-btn-success" ClientIDMode="Static" OnClientClick="return SaveMockTestData(this);" />

page.ascx.cs

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ScriptManager manager = ScriptManager.GetCurrent(Page);
                ServiceReference srMockTest = new ServiceReference("~/WCFSERVICES/MockTest.svc");
                manager.Services.Add(srMockTest);

                ScriptReference dd1 = new ScriptReference("~/SvcToDb/JsMocktest.js");
                manager.Scripts.Add(dd1);
            }
        }

Теперь позвольте мне показать вам, что находится внутри файла, JsMocktest.js

    (function (global, undefined) {
    var mocktest = {};
    var mockTestData = {};


    function SaveMockTestData(args) {

        if (args.value == "Save Template") {

            mockTestData.TemplateName = mocktest.txtTemplateName.value;
            mockTestData.TotalMarks = mocktest.txtTotalMarks.value;
            mockTestData.ExamDuration = mocktest.txtDuration.value;
            mockTestData.TotalQuestion = mocktest.txtTotQuestion.value;

            //question types
            let chkisMcq = mocktest.chkisMcq.checked;
            let txtMcqTypePostvMark = mocktest.txtMcqTypePostvMark.value;
            let txtMcqTypeNegtvMark = mocktest.txtMcqTypeNegtvMark.value;

            let chkisNonMcq = mocktest.chkisNonMcq.checked;
            let txtNonMcqTypePostvMark = mocktest.txtNonMcqTypePostvMark.value;
            let txtNonMcqTypeNegtvMark = mocktest.txtNonMcqTypeNegtvMark.value;

            var questionTypes = {
                qtype: []
            };

            if (chkisMcq) {
                questionTypes.qtype.push({
                    "isMcq": true,
                    "PostiveMarks": txtMcqTypePostvMark,
                    "NegetiveMark": txtMcqTypeNegtvMark,
                });
            }
            if (chkisNonMcq) {
                questionTypes.qtype.push({
                    "isMcq": false,
                    "PostiveMarks": txtNonMcqTypePostvMark,
                    "NegetiveMark": txtNonMcqTypeNegtvMark,
                });
            }
            debugger;
            mockTestData.TotalQuestionType = questionTypes;

            var table = $('#tableContainer').tableToJSON({
                ignoreColumns: [3]
            }
                );

            mockTestData.TotalSections = table;

            mockTestData.CalculatorTupe = mocktest.ddlCalcType.value;
            mockTestData.IsAutoSave = mocktest.chkIsAutoSave.checked;
            mockTestData.IsQuizPause = mocktest.chkCanPause.checked;
            mockTestData.IsMultilingualSupport = mocktest.chkIsMultLingual.checked;

            mockTestData.ExamInstruction = mocktest.chkExamInstruction.checked;
            mockTestData.ExamInstructionId = mocktest.ddlExamInstruction.value;
            var IMockTetst = new WcfAjaxServices.IMockTest();
            debugger;
            IMockTetst.InsertTemplateData(mockTestData, function (result, context, OnSuccess) {

            }, function (error, context, OnError) {
                //toastify("error", "ppp", "System Error", "toast-bottom-right", true);
            }, null);
        }
        return false;
    }

    global.$MockTestControlID = mocktest;
    global.SaveMockTestData = SaveMockTestData;
})(window);

Теперь вотСлужба,

public class MockTest:IMockTest
    {
        readonly BO_MockTest _objBoMockTest = new BO_MockTest();
        BL_MockTest objBL_BusinessPartners = new BL_MockTest();
        public int InsertTemplateData(TemplateData data)
        {
            _objBoMockTest.Flag = "1";
            _objBoMockTest.TemplateName = data.TemplateName;
            _objBoMockTest.TotalMarks = data.TotalMarks;
            _objBoMockTest.ExamDuration = data.ExamDuration;
            _objBoMockTest.TotalQuestions = data.TotalQuestion;
            //_objBoMockTest.TotalQuestionTypes = data.TotalQuestionType;
            //_objBoMockTest.TotalSections = data.TotalSections;
            _objBoMockTest.CalculatorType = data.CalculatorTupe;
            _objBoMockTest.IsAutoSave = data.IsAutoSave;
            _objBoMockTest.IsQuizPause = data.IsQuizPause;
            _objBoMockTest.IsMultilingualSupport = data.IsMultilingualSupport;
            _objBoMockTest.IsContainExamInstruction = data.ExamInstruction;
            _objBoMockTest.ExamInstructionId = data.ExamInstructionId;
            return 0;
        }
    }

вот интерфейс,

[ServiceContract(Namespace = "WcfAjaxServices")]
    public interface IMockTest
    {
        [OperationContract]
        int InsertTemplateData(TemplateData data);
    }

    [DataContract]
    public class TemplateData
    {
        [DataMember]
        public string TemplateName { get; set; }
        [DataMember]
        public string TotalMarks { get; set; }
        [DataMember]
        public string ExamDuration { get; set; }
        [DataMember]
        public string TotalQuestion { get; set; }

        [DataMember]
        public string TotalQuestionType { get; set; }
        [DataMember]
        public string TotalSections { get; set; }
        [DataMember]
        public string CalculatorTupe { get; set; }
        [DataMember]
        public bool IsAutoSave { get; set; }
        [DataMember]
        public bool IsQuizPause { get; set; }
        [DataMember]
        public bool IsMultilingualSupport { get; set; }
        [DataMember]
        public bool ExamInstruction { get; set; }
        [DataMember]
        public string ExamInstructionId { get; set; }
    }

Теперь я не имею ни малейшего понятия, как сопоставить мой объект json, т.е. mockTestData с TemplateData, и более подробно о том, как вызвать int InsertTemplateData (данные TemplateData); этот метод из моего кода JavaScript ..

Редактировать вМое сообщение

Я просто изменил свой метод WCF следующим образом:

[OperationContract]
int InsertTemplateData();

вместо использования

[OperationContract]
int InsertTemplateData(TemplateData data);

и

public class MockTest:IMockTest
    {
        readonly BO_MockTest _objBoMockTest = new BO_MockTest();
        BL_MockTest objBL_BusinessPartners = new BL_MockTest();
        public int InsertTemplateData()
        {
            TemplateData data = new TemplateData();
            _objBoMockTest.Flag = "1";
            _objBoMockTest.TemplateName = data.TemplateName;
            _objBoMockTest.TotalMarks = data.TotalMarks;
            _objBoMockTest.ExamDuration = data.ExamDuration;
            _objBoMockTest.TotalQuestions = data.TotalQuestion;
            //_objBoMockTest.TotalQuestionTypes = data.TotalQuestionType;
            //_objBoMockTest.TotalSections = data.TotalSections;
            _objBoMockTest.CalculatorType = data.CalculatorTupe;
            _objBoMockTest.IsAutoSave = data.IsAutoSave;
            _objBoMockTest.IsQuizPause = data.IsQuizPause;
            _objBoMockTest.IsMultilingualSupport = data.IsMultilingualSupport;
            _objBoMockTest.IsContainExamInstruction = data.ExamInstruction;
            _objBoMockTest.ExamInstructionId = data.ExamInstructionId;
            return 12;
        }
    }

и вызвалвот так,

IMockTetst.InsertTemplateData(function (result, context, OnSuccess) {
                debugger;

            }, function (error, context, OnError) {
                //toastify("error", "ppp", "System Error", "toast-bottom-right", true);
            }, null);

и при этом я получаю, результат, как и ожидалось. Таким образом, это означает, что есть проблема с mockTestData, который я передаю из javascript и TemplateData, который получает его ...

Мой вопрос заключается в том, как отобразить эти две переменные? Я думаю, что есть проблема с отображением .. ?? Нужна помощь, пожалуйста :)

Answer 1

Похоже, что вы решили вопрос о том, как вызвать службу WCF из кода Javascript. Остальная проблема заключается в том, как мы можем передать параметр методу при использовании объекта JSON.
Пожалуйста, обратитесь к примеру.

    <script>
        function Calculate() {
            var product = { "Name": "apple", "Amount": 3, "Price": 4.23 };
            CostService.CostOfProducts(product, function (result) {
                console.log(result)
            });
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/Content/CostService.svc" />
            </Services>
        </asp:ScriptManager>
        <div>
            Calculate the total prices of the Products.
        </div>
             <input type="button" value="Price of 3 sandwiches" onclick="Calculate()" />
        <br />
        <span id="additionResult"></span>
    </form>
</body>

Файл SVC.

[ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class CostService
    {
        [OperationContract]
        public double CostOfProducts(Product product)
        {
            return product.Amount * product.Price;
        }

    }

    [DataContract]
    public class Product
    {
        [DataMember]
        public string Name { get; set; }
        [DataMember]
        public int Amount { get; set; }
        [DataMember]
        public double Price { get; set; }
}

Не стесняйтесь сообщать мне, если есть что-то, с чем я могу помочь.