locked
using web forms with Vue RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User887623398 posted

    Hi,

    Is it possible to use Vue with web forms?

    regards,

    Saeed

    Thursday, August 9, 2018 6:57 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User283571144 posted

    Hi SaeedP,

    How should I define Vue in the header of my page?

    Does it have CDN like jquery?

    Yes, it contains the CDN library.

    https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

    We could create an easy example in the webform.

    Like below：

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Vuew.aspx.cs" Inherits="AspNetNormalIssue.Webform.Vuew_" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
   <div id="app">
        <input type="text" name="name" v-model="name" />
        {{name}}
    </div>
    </form>
    <script>
        let app = new Vue({
            el: '#app',
            data: {                
                name:'hello world'
            }
        })
    </script>
</body>
</html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 14, 2018 6:19 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User283571144 posted

    Hi SaeedP,

    SaeedP

    Is it possible to use Vue with web forms?

    Yes, it is possible.

    The vue is the client side framework. We could use it in the asp.net web form.

    I suggest you could develop with webpack to build Single File Components in the web form.

    Details, you could refer to below article.

    https://vuejs.org/v2/guide/single-file-components.html 

    https://cecilphillip.com/setting-up-webpack-in-asp-net-web-forms/ 

    Best Regards,

    Brando

    Friday, August 10, 2018 3:30 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User887623398 posted

    <g class="gr_ gr_9 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="9" data-gr-id="9">Thanks</g> Brando for your guidance.

    How should I define Vue in the header of my page?

    Does it have CDN like jquery?

    Friday, August 10, 2018 9:44 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User283571144 posted

    Hi SaeedP,

    How should I define Vue in the header of my page?

    Does it have CDN like jquery?

    Yes, it contains the CDN library.

    https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

    We could create an easy example in the webform.

    Like below：

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Vuew.aspx.cs" Inherits="AspNetNormalIssue.Webform.Vuew_" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
   <div id="app">
        <input type="text" name="name" v-model="name" />
        {{name}}
    </div>
    </form>
    <script>
        let app = new Vue({
            el: '#app',
            data: {                
                name:'hello world'
            }
        })
    </script>
</body>
</html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 14, 2018 6:19 AM