how to do Jquery client with ASP Core 6 / 7 MVC

[ridingmower]

Hello, this looks very nice, but need some help with trying it out, can you please allow us a sample with Jquery to do survey samples and ASP Core backend please

[tsv2013]

Unfortunately right now our team doesn't have spare resources to create such an example - the whole client jQuery application. But you can study live demos on our site - https://surveyjs.io/form-library/examples/nps-question/jquery
Not that some our libraries are under commercial license.

[ridingmower]

Hello the sample here is convoluted to understand.

For the benefit of the community, showing a simple MVC View and Controller would go a long way.

[tsv2013]

What would you like to see in these view/controller pair?

[ridingmower]

Hello and thanks for looking into it.

Please start with 2 simple Views, showing how to incorporate SurveyJs in ASP mvc core - simple JavaScript/jQuery/ts/razor

• CreateSruveyView: One view for showing how users can create and save surveys, edit update etc. inside asp Views (Razor) for e.g. if you recommend _Layouts or ViewComponents or PartialViews or something very basic. to add surveyjs easily into the web app.
• TakeSurveyView: Another view to show how to render surveys to allow people to take surveys and save results. Sometime anonymous and other times logged in user, so either are fine.

1. In both these, please do add steps/comments in the code to explain where/how the JSON structure is going back and forth
2. Allow backend developers to easily swap out the different form/survey components you have, for e.g. difference between a ifThen Question vs basic question in survey
3. Many ASP developers are not frontend, they are backend C#, so this is ideal if its easy to use from a backend integration & CRUD

Hopefully this helps, but when I use bootstrap it fails..

---

@{
    ViewData["Title"] = "SomeTest_TextEditor";
}

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div id="surveyContainer">
                <div id="editorElement"></div>
            </div>
        </div>
    </div>

</div>


@section Styles {
  <link href="~/lib/surveyjs/dist/css/select2.min.css" rel="stylesheet" />
<link href="~/lib/surveyjs/dist/css/surveyeditor.css" type="text/css" rel="stylesheet" />
// I was not able to get bootstrap to work

    <style>
        #page-wrapper > div.wrapper.wrapper-content > div > div {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        #page-wrapper > div.wrapper.wrapper-content{
            padding: 0px 0px 20px 0px !important;
        }
        #editorElement > div > div.panel.svd_content,
        .svd_container .svd_content .svd_survey_designer .svd_toolbox,
        .svd_container .svd_content .svd_survey_designer .svd_toolbox .btn-group-vertical .btn,
        #surveyjsExample > div > div.panel-footer,
        #page-wrapper{
            background-color: white !important;
        }
    </style>

}
@section Scripts {
    <environment names="Development,Staging,Productio">
        <script src="~/lib/surveyjs/dist/js/knockout-min.js"></script>
        <script src="~/lib/surveyjs/dist/js/survey.ko.js"></script>
        <script src="~/lib/surveyjs/dist/js/ace.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="~/lib/surveyjs/dist/js/worker-json.js" type="text/javascript" charset="utf-8"></script>
        <script src="~/lib/surveyjs/dist/js/mode-json.js" type="text/javascript" charset="utf-8"></script>

        <script src="~/lib/surveyjs/dist/js/select2.min.js"></script>
        <script src="~/lib/surveyjs/dist/js/surveyeditor.js"></script>
    </environment>


<script type="text/javascript">
    Survey.Survey.cssType = "bootstrap";
    Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
    var editorOptions = { questionTypes: ["text", "checkbox", "radiogroup", "dropdown"], showJSONEditorTab: false, showPropertyGrid: false };
    var editor = new SurveyEditor.SurveyEditor("editorElement", editorOptions);
    //Add all countries question into toolbox
    editor.toolbox.addItem({
        name: "countries",
        isCopied: true,
        iconName: "icon-default",
        title: "All countries",
        json: { "type": "dropdown", optionsCaption: "Select a country...", choicesByUrl: { url: "https://restcountries.eu/rest/v1/all" } }
    });
</script>
}

[Bpola005]

I have a cshtml page in which I want to incorporate surveyJS, I used @Sections. However the code is still not called. Please help!!

[ridingmower]

if you share a link I can try and help

[ridingmower]

Hello can you add sample ASP Razor or Blazor Views please