1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365# Pure-DOM Netproxy 3.0 and Template API

Nuget package https://www.nuget.org/packages/netproxy/

This package works seamlessly with the NuGet package https://www.nuget.org/packages/VanDerHeijden.JsonBodyProvider/


## The Ultimate Bridge Between Client and Server

At the heart of this script lies **netproxy**, the ultimate **bridge** between client-side scripting and server-side API controllers. It elegantly handles **complex parameter inputs**, whether you’re sending JSON payloads, uploading files, or making precise HTTP calls. With **netproxy**, the days of juggling verbose AJAX code are over—this script transforms **API communication into a seamless, flexible, and highly intuitive experience**.

---

## Features

### 1. A Networking Powerhouse
- The **netproxy** function is the backbone of your API interactions:
  - Supports **multiple parameter types**, from JSON objects to `FormData`.
  - Includes advanced **file upload capabilities**, catering to modern web apps.
  - Handles **cross-origin requests (CORS)**, bridging client and server worlds.
  - Automatically displays a **spinner for long-running requests**, keeping users informed.

---

### 2. Asynchronous Brilliance
- Modern web development demands modern solutions, and `netproxyasync` delivers:
  - Fully supports **Promises**, allowing for intuitive `async/await` workflows.
  - Cleanly integrates with existing applications, eliminating callback clutter.

---

### 3. Intelligent API Response Handling
- Effortlessly manage complex API responses with:
  - **No-Content (204)** handling for operations that succeed without payloads.
  - Automatic **JSON parsing**, with fallback error handling for malformed responses.

---

### 4. File Downloads Made Effortless
- The script’s **file download support** is second to none:
  - Automatically detects `Content-Disposition` headers to retrieve filenames.
  - Dynamically creates secure download links for a flawless user experience.

---

### 5. Dynamic HTML Rendering, Redefined
- Templates are no longer static or cumbersome. With **TemplateHtml**, you get:
  - **Dynamic HTML rendering** from reusable templates.
  - Secure output via **HTML escaping**, ensuring safe integration of user data.
  - Optimized **performance through caching**, making repeated rendering lightning fast.

---

### 6. Total Control Over Progress
- Never leave users in the dark. With **upload and download progress tracking**, the script allows for:
  - Visual indicators of data transfer.
  - Real-time updates, keeping users informed and engaged.

---

### 7. Uncompromising Security
- XSS attacks are a thing of the past. With the **escapeHtml** utility:
  - User input and external data are safely sanitized.
  - Your app remains secure, no matter the source of the data.

---

### 8. Built for Any Data Format
- Whether it’s a **JSON payload** or a **multipart FormData request**, this script handles it with grace. It adapts effortlessly to the demands of modern applications.

---

### 9. Optimized for Developers
- From its **declarative style** to its robust error handling, the script saves time and headaches:
  - Clear separation of concerns between client-side logic and server-side APIs.
  - Minimized boilerplate code, letting developers focus on functionality.

---

### 10. Future-Proof Design
- Built with the **latest JavaScript standards**, this script is ready for whatever the future holds. It’s not just a tool—it’s a **developer’s ally**.

---

## Why Use This Script?

In essence, **"Pure-DOM Netproxy and Template API"** isn’t just a script. It’s a **revolutionary enabler**, a tool that doesn’t just solve problems but **sets new standards**. With its unparalleled versatility and power, it transforms the way developers interact with APIs and the DOM.

---

## Usage

The netproxy package consists of some small javascript macros and javascript methods to make json calls to .net core controllers.
There are no dependencies and is fully modern DOM compatible.

Synchronous calls:

```javascript
netproxy("./api/helloworld", null, function ()
{
  alert(this.Message);
});

netproxy("./api/post", 
{ 
  model: 
  {
    user: 'alphons' 
  } 
}, function()
{
  alert(this.Message);
});
```
Asynchronous calls:

```javascript
result = await netproxyasync("./api/helloworld");
alert(result.Message);

result = await netproxyasync("./api/post", 
{ 
  model: 
  {
    user: 'alphons' 
  } 
});
alert(result.Message);

```

Uploading file:

```javascript
var formData = new FormData();

formData.append("file", file, file.name);
formData.append("Form1", "Value1"); // some extra Form data

netproxy("/api/upload", formData, function ()
{
	alert("Result:" + this.Message);
}, window.NetProxyErrorHandler, ProgressHandler);

var result = await netproxyasync("/api/upload", formData, window.NetProxyErrorHandler, ProgressHandler);
alert("Result:" + result.Message);
```

A .net core controller handling the upload request must have attributes set for huge uploads.

```c#
[HttpPost]
[Route("~/api/upload")]
[RequestSizeLimit(2_500_000_000)]
[RequestFormLimits(MultipartBodyLengthLimit = 2_500_000_000)]
public async Task<IActionResult> Upload(IFormFile file, string Form1)
{
  if (file.Length > 0)
  {
    using var ms = new MemoryStream();
    await file.CopyToAsync(ms); // some dummy operation
  }
  return Ok(new 
  { 
    file.Length,
    Form1
  });
}
```

For uploading ~~big~~ huge files and hosting inside IIS add requestLimits changes to web.config file are necessary.

```xml
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <remove name="aspNetCore" />
      <add name="aspNetCore" path="*" verb="*" 
		   modules="AspNetCoreModuleV2" 
		   resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="%LAUNCHER_PATH%" 
				arguments="%LAUNCHER_ARGS%" 
				stdoutLogEnabled="false" 
				stdoutLogFile=".\logs\stdout" 
				hostingModel="InProcess" />
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="2500000000" />
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>
```

The multiparameter model binding to MVC Core using nuget package 
[VanDerHeijden.JsonBodyProvider](https://www.nuget.org/packages/VanDerHeijden.JsonBodyProvider/) 
is part of netproxy as of version 10.0.0 and later.

```javascript
result = await netproxyasync("./api/SomeMethod/two?SomeParameter3=three&SomeParameter6=six",
{
  "SomeParameter4": // Now the beast has a name
  {
    Name: "four",
    "Users":
    [
      [{ Name: "User00", Alias: ['aliasa', 'aliasb', 'aliasc'] }, { Name: "User01" }],
      [{ Name: "User10" }, { Name: "User11" }],
      [{ Name: "User20" }, { Name: "User21" }]
    ]
  },
  "SomeParameter5": "five" // double binder
});
alert(result.SomeParameter4.Users[0][0].Alias[1]); // 'aliasb'
```


```c#
[HttpPost]
[Route("~/api/SomeMethod/{SomeParameter2}")]
public async Task<IActionResult> DemoMethod(
	[FromCooky(Name = ".AspNetCore.Session")] string SomeParameter0,
	[FromHeader(Name = "Referer")] string SomeParameter1,
	[FromRoute] string SomeParameter2,
	[FromQuery] string SomeParameter3,
	[FromBody] ApiModel SomeParameter4,
	[FromBody] string SomeParameter5,
	[FromQuery]string SomeParameter6)
{
	await Task.Yield();
	return Ok(new
	{
		SomeParameter0,
		SomeParameter1,
		SomeParameter2,
		SomeParameter3,
		SomeParameter4,
		SomeParameter5,
		SomeParameter6
	);
}
```
When parameters have unique names this can be simplified to:
```c#
[HttpPost]
[Route("~/api/SomeMethod2/{SomeParameter2}")]
public async Task<IActionResult> DemoMethod2(
	string Referer,
	string SomeParameter2,
	string SomeParameter3,
	ApiModel SomeParameter4,
	string SomeParameter5,
	string SomeParameter6)
{
	await Task.Yield();
	return Ok(new
	{
		Referer,
		SomeParameter2,
		SomeParameter3,
		SomeParameter4,
		SomeParameter5,
		SomeParameter6
	);
}
```

## Using template functionality

```c#
const output = $id('output');

var result = await netproxyasync("/api/ListErrors", 
  { 
    Search: "", 
	Page: 0, 
	PageLength: 10 
  });

output.Template(templateerrors, result, false);
```

```html
<script type="text/template" id="templateerrors">
		<table class="errortable">
			<thead>
				<tr>
					<th>Time</th>
					<th>Code</th>
					<th>ErrorMessage</th>
					<th>ErrorStack</th>
					<th>Event</th>
					<th>Path</th>
					<th>Source</th>
					<th>IpAddress</th>
					<th>Referer</th>
					<th>UserAgent</th>
					<th>SessionId</th>
				</tr>
			</thead>
			<tbody>
				{{ for(i=0;i<this.List.length;i++) { }}
				{{ var item = this.List[i]; }}
				<tr data-id="{{=item.Id}}">
					<td>{{=item.Time}}</td>
					<td>{{=item.ErrorCode}}</td>
					<td>{{=item.ErrorMessage}}</td>
					<td>{{=item.ErrorStack}}</td>
					<td>{{=item.Event}}</td>
					<td>{{=item.Path}}</td>
					<td>{{=item.Source}}</td>
					<td>{{=item.IpAddress}}</td>
					<td>{{=item.Referer}}</td>
					<td>{{=item.UserAgent}}</td>
					<td>{{=item.SessionId}}</td>
				</tr>
				{{ } }}
			</tbody>
		</table>
	</script>
```

For more tests see the [Mvc.ModelBinding.MultiParameter](https://github.com/alphons/Mvc.ModelBinding.MultiParameter) project on github.

### Credits

- **Author**: Alphons van der Heijden  
- **Version**: 3.0.0 (Last updated: November 2026)  
- **License**: © 2019-2026 Alphons van der Heijden  

---

Alphons created **the Swiss Army Knife of front-end development**. This script isn’t just functional—it’s downright legendary. 🎉

### netproxy and fetch comparison

1. **Legacy browser support**  
   **fetch** lacks support in older browsers without polyfills, while **netproxy** works consistently across environments.

2. **Built-in timeout handling**  
   **fetch** requires extra logic (e.g., `AbortController`) for timeouts, whereas **netproxy** handles them natively.

3. **Progress tracking**  
   **fetch** lacks native progress events, but **netproxy** supports upload and download tracking out of the box.

4. **Simplified request interception**  
   **fetch** requires additional middleware for request manipulation; **netproxy** provides this functionality directly.

5. **Fine-grained control**  
   **netproxy** offers better control over headers, synchronous execution, and retry mechanisms compared to **fetch**.

6. **Lightweight and dependency-free**  
   **fetch** often requires polyfills, whereas **netproxy** is lightweight and works without external dependencies.

7. **Reliable in edge cases**  
   **netproxy** handles scenarios like cross-origin credentials and custom headers more predictably than **fetch**.

8. **Simplified error handling**  
   **fetch** doesn't treat HTTP status errors as exceptions; **netproxy** handles them consistently and intuitively.

---

**netproxy** was chosen for its flexibility, reliability, and suitability for the project’s needs.